@simpleapps-com/augur-tailwind

Tailwind CSS preset with HSL theme variables, design tokens, and animations for Augur applications. Works with augur-web components out of the box.

npm install @simpleapps-com/augur-tailwind

Setup

Add the preset to your Tailwind config:

import { augurPreset } from "@simpleapps-com/augur-tailwind";
import type { Config } from "tailwindcss";

export default {
  presets: [augurPreset],
  content: ["./src/**/*.{ts,tsx}"],
} satisfies Config;

Import the base CSS variables in your global stylesheet:

@import "@simpleapps-com/augur-tailwind/base.css";

Theme Variables

All colors use HSL CSS custom properties. Override them in your own CSS to customize branding.

Colors

Variable	Default	Usage
`--background`	`0 0% 100%`	Page background
`--foreground`	`222.2 84% 4.9%`	Default text
`--primary`	`206 76% 42%`	Primary actions and links
`--primary-foreground`	`210 40% 98%`	Text on primary
`--secondary`	`270 1% 35%`	Secondary elements
`--secondary-foreground`	`222.2 47.4% 11.2%`	Text on secondary
`--muted`	`210 40% 96.1%`	Muted backgrounds
`--muted-foreground`	`215.4 16.3% 46.9%`	Muted text
`--accent`	`210 40% 96.1%`	Accent highlights
`--accent-foreground`	`222.2 47.4% 11.2%`	Text on accent
`--destructive`	`0 84.2% 60.2%`	Error and danger
`--destructive-foreground`	`210 40% 98%`	Text on destructive

UI

Variable	Default	Usage
`--border`	`214.3 31.8% 91.4%`	Border color
`--input`	`214.3 31.8% 91.4%`	Input borders
`--ring`	`222.2 84% 4.9%`	Focus ring
`--radius`	`0.5rem`	Border radius base

Semantic Classes

The preset maps variables to Tailwind utility classes:

// These all work out of the box
<div className="bg-background text-foreground" />
<button className="bg-primary text-primary-foreground" />
<p className="text-muted-foreground" />
<div className="border-border rounded-lg" />
<div className="bg-card text-card-foreground" />

Customizing

Override CSS variables in your global stylesheet to change branding site-wide:

@import "@simpleapps-com/augur-tailwind/base.css";

:root {
  --primary: 240 60% 50%;
  --primary-foreground: 0 0% 100%;
  --radius: 0.75rem;
}

All components using bg-primary, text-primary-foreground, etc. will pick up the new values automatically.

Included Plugins

tailwindcss-animate — animation utilities for accordion, fade, slide transitions

Animations

Class	Description
`animate-accordion-down`	Expand accordion content
`animate-accordion-up`	Collapse accordion content

Border Radius Scale

Class	Value
`rounded-sm`	`calc(var(--radius) - 4px)`
`rounded-md`	`calc(var(--radius) - 2px)`
`rounded-lg`	`var(--radius)`

augur-tailwind

On this page