Tailwind CSS v4 Tips & Tricks

What's New in Tailwind v4?

Tailwind CSS v4 introduces a completely new engine and configuration approach. Instead of a tailwind.config.js file, you configure everything in CSS.

Installation with Vite

bun add -D @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()],
});

/* app.css */
@import "tailwindcss";

CSS-First Configuration

Customize your theme directly in CSS:

@import "tailwindcss";

@theme {
  --color-brand: #7c3aed;
  --font-display: "Inter", sans-serif;
  --radius-xl: 1rem;
}

Custom Dark Mode Variant

To use class-based dark mode:

@custom-variant dark (&:where(.dark, .dark *));

Then toggle the dark class on to switch themes.

Useful Utility Patterns

Gradient text:

<span class="bg-linear-to-r from-violet-500 to-fuchsia-500 bg-clip-text text-transparent">
  Hello World
</span>

Glass morphism card:

<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6">
  ...
</div>

Smooth hover transitions:

<button class="bg-violet-600 hover:bg-violet-500 transition-colors duration-200">
  Click me
</button>

Conclusion

Tailwind v4 is faster, more flexible, and requires less configuration than ever. The CSS-first approach feels natural and makes it easy to co-locate your design tokens with your styles.