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-tailwindTailwind CSS- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain tailwind/v4-entry