tailwindcss

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

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.

本Skill基于Tailwind CSS v4.1生成，生成时间为2026-02-06。

Tailwind CSS是一个实用优先的CSS框架。v4版本通过CSS中的

@theme

和

@source

进行配置（无需

tailwind.config.js

）。支持Vite、PostCSS和CLI。

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

主题	描述	参考链接
安装	Vite、PostCSS和CLI的配置；CSS入口文件	core-installation
主题	@theme、设计令牌、命名空间、扩展/覆盖	core-theme
内容与源	类检测、@source、基础路径、安全列表	core-content-sources
CLI	构建命令、--input、--output、--watch、--minify	core-cli

Topic	Description	Reference
Custom styles	Arbitrary values, @layer, @utility, @custom-variant	features-custom-styles

主题	描述	参考链接
自定义样式	任意值、@layer、@utility、@custom-variant	features-custom-styles

Topic	Description	Reference
Vite plugin	@tailwindcss/vite options (optimize, minify)	integrations-vite
PostCSS plugin	@tailwindcss/postcss options (base, optimize, transformAssetUrls)	integrations-postcss

主题	描述	参考链接
Vite插件	@tailwindcss/vite配置选项（optimize、minify）	integrations-vite
PostCSS插件	@tailwindcss/postcss配置选项（base、optimize、transformAssetUrls）	integrations-postcss

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

CSS入口文件（所有配置场景）：

css

@import "tailwindcss";

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