Tailwind CSS v4

Resources

• TailwindCSS Docs
• Shadcn Components

Core Setup (v4)

CSS-First Configuration

Configure in CSS using @theme instead of tailwind.config.js:

@import 'tailwindcss';

@theme {
    --font-display: 'Satoshi', 'sans-serif';
    --breakpoint-3xl: 1920px;
    --color-brand: oklch(0.84 0.18 117.33);
    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

Import Syntax

/* v4 */
@import "tailwindcss";

/* v3 (deprecated) */
@tailwind base;
@tailwind components;
@tailwind utilities;

Package Changes

No need for postcss-import or autoprefixer.

Legacy Config Support

@import 'tailwindcss';
@config "../../tailwind.config.js";

Essential v4 Changes

Opacity Syntax

<!-- v4: Use color modifiers -->
<div class="bg-black/50 text-white/75 border-red-500/30">

<!-- v3 (removed): Don't use these -->
<div class="bg-black bg-opacity-50">

CSS Variables in Arbitrary Values

<!-- v4 -->
<div class="bg-(--brand-color)">

<!-- v3 (deprecated) -->
<div class="bg-[--brand-color]">

Renamed Utilities

• shadow-sm → shadow-xs, shadow → shadow-sm
• blur-sm → blur-xs, blur → blur-sm
• rounded-sm → rounded-xs, rounded → rounded-sm
• outline-none → outline-hidden

Default Changes

• Border color: currentColor (was gray-200)
• Ring width: 1px (was 3px)
• Hover: only applies on @media (hover: hover)

Quick Patterns

Container Queries

<div class="@container">
  <div class="@md:flex @lg:grid">Responsive to container</div>
</div>

Dark Mode

@import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));

Custom Utility

@utility scrollbar-hidden {
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
}

Custom Variant

@variant pointer-coarse (@media (pointer: coarse));

Guidelines

• Prefer ShadCN for UI components
• Avoid tailwind.config.js unless user requires it
• Use CSS variables via @theme for theming

Detailed Reference

For complete documentation on theme namespaces, all new features, variants, breaking changes, and advanced configuration, see references/v4-reference.md.