Tailwind CSS

tailwind/v4-entry

In Tailwind CSS 4, load Tailwind with @import "tailwindcss" and a legacy JS config with @config; @tailwind directives do nothing.

umiarkowanastatycznefe-tailwind

Dlaczego

Tailwind 4 removed the @tailwind base; @tailwind components; @tailwind utilities; directives and no longer finds tailwind.config.js on its own. A project upgraded by changing the version number builds without errors but ships without utilities, or without the colours, fonts and plugins its JS config defined.

Poprawka

Run npx @tailwindcss/upgrade (Node.js 20 or newer) on a clean branch. By hand: replace the three directives with @import "tailwindcss";, move the theme into @theme { ... } in that CSS file, or keep the JS config for now with @config "../tailwind.config.js"; right after the import.

Przykłady

/* bad (tailwindcss 4 in package.json) */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* good */
@import "tailwindcss";
@theme { --color-brand-600: #0a7a3e; }

Źródła

Fakty

Identyfikator
tailwind/v4-entry
Waga
umiarkowana
Sprawdzanie
statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików
project
Tylko w projektach z
tailwind
Uczy jej skill
fe-tailwind Tailwind CSS
Od wersji
0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain tailwind/v4-entry