Tailwind v4 Styling Skill
Use this skill whenever writing CSS or applying classes. Tailwind v4 behaves differently from v3 (No config js, dynamic values).
When to use this skill
-
When applying styles to Blade/Flux components.
-
When creating custom CSS files.
-
When configuring theme colors/fonts.
Workflow
- Configuration (CSS-First)
Do NOT look for tailwind.config.js . Theme extensions happen in CSS:
@theme { --color-brand: oklch(0.72 0.11 178); --font-sans: "Inter", sans-serif; }
- Deprecated Utilities (DO NOT USE)
Deprecated Replacement
bg-opacity-50
bg-black/50
text-opacity-25
text-black/25
flex-grow
grow
flex-shrink
shrink
- Dynamic Values
Tailwind v4 allows dynamic values without configuration:
-
Use w-[153px] freely.
-
Use bg-[#123456] freely.
- Dark Mode
-
Unless specified otherwise, always include Dark Mode support.
-
Use dark: modifier: <div class="bg-white dark:bg-zinc-800"> .
-
Colors: Prefer semantic names (bg-zinc-100 ) over absolute ones (bg-gray-100 ) for better dark mode adaptation.