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