tailwindcss

Original：🇺🇸 English

Translated

Tailwind CSS v4 setup, theme variables, content sources, custom styles, and Vite/PostCSS/CLI integration. Use when styling with utility classes, configuring theme or content, or integrating Tailwind in a build pipeline.

1installs

Sourcejohnsonmao/skills

Added on2026-02-07

NPX Install

npx skill4agent add johnsonmao/skills tailwindcss

SKILL.md Content

View Translation Comparison →

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):

css

@import "tailwindcss";

Theme and sources in CSS:

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