Tailwind CSS
Skill is based on Tailwind CSS v4.1, generated at 2026-02-06.
Tailwind CSS is a utility-first CSS framework. v4 is configured in CSS via @theme and @source (no tailwind.config.js). Supports Vite, PostCSS, and CLI.
Core References
| Topic | Description | Reference |
|---|---|---|
| Installation | Vite, PostCSS, and CLI setup; CSS entry | core-installation |
| Theme | @theme, design tokens, namespaces, extending/overriding | core-theme |
| Content & sources | Class detection, @source, base path, safelist | core-content-sources |
| CLI | Build command, --input, --output, --watch, --minify | core-cli |
Features
| Topic | Description | Reference |
|---|---|---|
| Custom styles | Arbitrary values, @layer, @utility, @custom-variant | features-custom-styles |
Integrations
| Topic | Description | Reference |
|---|---|---|
| Vite plugin | @tailwindcss/vite options (optimize, minify) | integrations-vite |
| PostCSS plugin | @tailwindcss/postcss options (base, optimize, transformAssetUrls) | integrations-postcss |
Quick reference
CSS entry (all setups):
@import "tailwindcss";
Theme and sources in CSS:
@theme { --color-mint-500: oklch(0.72 0.11 178); }
@source "../node_modules/@acme/ui";
Vite: plugins: [tailwindcss()] · PostCSS: plugins: { '@tailwindcss/postcss': {} } · CLI: npx @tailwindcss/cli -i input.css -o output.css --watch