Skip to main content

​
Overview

The SAAC Frontend template uses Tailwind CSS v4, the latest version with significant improvements in performance, developer experience, and build tooling integration.
Tailwind CSS v4 is a major update that includes a native Vite plugin, improved JIT compiler, and simplified configuration.

​
Installation

Tailwind CSS v4 is already installed in the template:
package.json
{
  "dependencies": {
    "@tailwindcss/vite": "^4.1.13",
    "tailwindcss": "^4.1.13"
  }
}

​
Key Packages

​
tailwindcss
string
default:"^4.1.13"
Core Tailwind CSS framework with JIT compiler
​
@tailwindcss/vite
string
default:"^4.1.13"
Native Vite plugin for seamless integration (no PostCSS needed)

​
Vite Integration

Tailwind CSS v4 integrates directly with Vite through a native plugin:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
Previous Tailwind versions (v3 and earlier) required PostCSS configuration:
// postcss.config.js (NOT needed in v4!)
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Tailwind CSS v4 eliminates this requirement:
  • Native Vite plugin handles all processing
  • Faster builds (no PostCSS overhead)
  • Simpler setup (one less config file)
  • Better HMR (Hot Module Replacement)

​
CSS Setup

The template includes Tailwind’s base styles in src/index.css:
src/index.css
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ... additional custom styles ... */
Tailwind CSS v4 automatically detects and processes your CSS files. You don’t need @tailwind directives unless you want explicit control over layer ordering.

​
Adding Tailwind Directives (Optional)

If you want explicit control over where Tailwind injects its styles:
src/index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Your custom styles */
:root {
  --primary-color: #646cff;
}
​
base
layer
Resets and base styles (normalize.css-like defaults)
​
components
layer
Component classes (custom utilities you create with @layer components)
​
utilities
layer
Tailwind’s utility classes (margin, padding, colors, etc.)

​
Using Tailwind Classes

Apply utility classes directly in your JSX:
src/App.tsx
function App() {
  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <header className="p-6 border-b border-gray-700">
        <h1 className="text-3xl font-bold text-blue-400">
          SAAC Frontend
        </h1>
      </header>
      
      <main className="container mx-auto p-8">
        <button className="px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors">
          Click me
        </button>
      </main>
    </div>
  )
}

​
Common Utility Patterns

<div className="p-4">      {/* Padding: 1rem (16px) */}
<div className="m-8">      {/* Margin: 2rem (32px) */}
<div className="px-6 py-3"> {/* Padding x: 1.5rem, y: 0.75rem */}
<div className="space-y-4"> {/* Vertical spacing between children */}

​
JIT Compiler

Tailwind CSS v4 uses a Just-In-Time (JIT) compiler that generates styles on-demand.

​
Benefits

Traditional (v2) approach:
  • Generated ALL utility classes upfront
  • Large CSS file during development (10+ MB)
  • Slow initial load
  • Purged unused classes in production
JIT (v3+, default in v4):
  • Generates only the classes you use
  • Small CSS file (few KB)
  • Instant compilation
  • Same size in dev and production
  • Supports arbitrary values on-the-fly

​
Arbitrary Values

JIT enables arbitrary values without configuration: 
<div className="w-[137px] bg-[#1c1c1c] top-[117px]">
  {/* Custom values without config! */}
</div>

<div className="grid-cols-[1fr_500px_2fr]">
  {/* Complex CSS Grid layouts */}
</div>
Use arbitrary values sparingly. Prefer Tailwind’s default scale for consistency.

​
Configuration (CSS-based)

Tailwind CSS v4 uses CSS-based configuration instead of tailwind.config.js.

​
Theme Customization

Define custom theme values using CSS variables:
src/index.css
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-primary: #646cff;
  --color-secondary: #535bf2;
  
  /* Custom spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  
  /* Custom fonts */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* Custom breakpoints */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}
Use custom values: 
<div className="text-primary bg-secondary p-md font-sans">
  Custom theme values!
</div>
Old way (v3):
tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: '#646cff',
      },
    },
  },
}
New way (v4):
src/index.css
@theme {
  --color-primary: #646cff;
}
Benefits:
  • No JavaScript config file
  • CSS variables work at runtime
  • Better IDE support
  • Easier to override per-component

​
Dark Mode

Implement dark mode using CSS variables:
src/index.css
@theme {
  --color-background: #ffffff;
  --color-text: #213547;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: #242424;
    --color-text: rgba(255, 255, 255, 0.87);
  }
}
Use in components: 
<div className="bg-background text-text">
  Automatically adapts to dark mode!
</div>
Or use Tailwind’s built-in dark: variant: 
<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
  Dark mode variant
</div>

​
Custom Utilities

Create custom utility classes:
src/index.css
@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent;
  }
  
  .card {
    @apply rounded-lg border border-gray-200 p-6 shadow-sm;
  }
}
Use them like any Tailwind class: 
<h1 className="text-gradient">Gradient Text</h1>
<div className="card">Card content</div>

​
Plugins

Tailwind CSS v4 supports official plugins:

​
Forms Plugin

npm install -D @tailwindcss/forms
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss({
      plugins: ['@tailwindcss/forms']
    })
  ],
})

​
Typography Plugin

npm install -D @tailwindcss/typography
Provides a prose class for beautiful typography: 
<article className="prose lg:prose-xl dark:prose-invert">
  <h1>Article Title</h1>
  <p>Your markdown-rendered content...</p>
</article>

​
IntelliSense

​
VS Code Extension

Install Tailwind CSS IntelliSense: 
code --install-extension bradlc.vscode-tailwindcss
Features:
  • Autocomplete: Suggests classes as you type
  • Hover preview: Shows CSS values on hover
  • Syntax highlighting: Colors for utility classes
  • Linting: Warns about invalid classes

​
Configuration

.vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

​
Production Optimization

Tailwind CSS v4 automatically optimizes for production:
When you run npm run build, Tailwind:
  1. Removes unused styles: Only includes classes found in your source code
  2. Minifies CSS: Compresses selectors and properties
  3. Removes comments: Strips all CSS comments
  4. Optimizes repeated rules: Deduplicates identical declarations
Result: CSS file typically under 10 KB gzipped.
No additional configuration needed. Tailwind v4 handles this automatically via the Vite plugin.

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us