tailwindcss
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
More from johnsonmao/skills
finishing-a-development-branch
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
8test-driven-development
Use when implementing any feature or bugfix, before writing implementation code
8verification-before-completion
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
7vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
7writing-plans
Use when you have a spec or requirements for a multi-step task, before touching code
7brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
7