tailwind-4-docs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind 4 Docs

Tailwind 4 文档

Overview

概述

Use this skill to navigate a locally synced Tailwind CSS v4 documentation snapshot and answer development, configuration, and migration questions with official guidance.

The docs snapshot is not bundled with this skill because the upstream repository is source-available but not open-source. Users must initialize the snapshot themselves and are responsible for complying with the upstream license.

使用本技能可访问本地同步的Tailwind CSS v4文档快照，依据官方指南回答开发、配置及迁移相关问题。

该文档快照未与本技能捆绑，因为上游仓库为源码可用但非开源。用户需自行初始化快照，并负责遵守上游许可协议。

Quick start

快速开始

Check whether the docs snapshot is initialized (
```
references/docs/
```
and
```
references/docs-index.tsx
```
exist).
If the snapshot is missing or older than one week, stop and ask to run the initialization step in "Initialization" before continuing. Do not answer the user's question until the snapshot is initialized.
Identify the topic (utility, variant, config, migration, compatibility).
Find the matching doc in
```
references/docs-index.tsx
```
.
Load only the relevant file from
```
references/docs/
```
.
Apply guidance and call out any breaking changes or constraints.

检查文档快照是否已初始化（确认
```
references/docs/
```
和
```
references/docs-index.tsx
```
文件存在）。
若快照缺失或已超过一周未更新，请暂停操作，先执行「初始化」章节中的步骤，完成后方可继续。在快照初始化前，请勿回答用户的问题。
确定主题（工具类、变体、配置、迁移、兼容性）。
在
```
references/docs-index.tsx
```
中查找匹配的文档。
仅从
```
references/docs/
```
加载相关文件。
应用指南内容，并标注任何破坏性变更或约束条件。

Initialization (required once per install)

初始化（每次安装需执行一次）

Run the sync script to download the Tailwind docs locally. This requires network access, git, and Python 3:

python skills/tailwind-4-docs/scripts/sync_tailwind_docs.py --accept-docs-license

This pulls content from

tailwindlabs/tailwindcss.com

. That repo is source-available and explicitly not open-source, so the user must accept its license before downloading and keep the snapshot local.

If you cannot run tools or have no internet access, ask the user to run the exact command above in a terminal, then continue once

references/docs/

and

references/docs-index.tsx

exist.

If the snapshot is missing or older than one week, you must ask for permission to run the command or ask the user to run it. Do not proceed with Tailwind guidance until the snapshot is initialized or refreshed.

If initialization is blocked (no internet or no write access), use

references/gotchas.md

as a limited fallback and ask the user to consult the official docs.

运行同步脚本以在本地下载Tailwind文档。此操作需要网络连接、git和Python 3环境：

python skills/tailwind-4-docs/scripts/sync_tailwind_docs.py --accept-docs-license

该脚本会从

tailwindlabs/tailwindcss.com

拉取内容。该仓库为源码可用，但明确非开源，因此用户在下载前必须接受其许可协议，并将快照保存在本地。

若无法运行工具或无网络连接，请要求用户在终端中运行上述命令，待

references/docs/

和

references/docs-index.tsx

文件存在后再继续。

若快照缺失或已超过一周未更新，必须先请求许可运行该命令，或让用户自行执行。在快照初始化或更新完成前，请勿提供Tailwind相关指导。

若初始化受阻（无网络或无写入权限），可使用

references/gotchas.md

作为有限的备选方案，并建议用户查阅官方文档。

References map

参考资源映射

```
references/docs/
```
is generated locally and contains the Tailwind v4 MDX docs snapshot.
```
references/docs-index.tsx
```
is generated locally and contains the category and slug map used by the docs sidebar.
```
references/docs-source.txt
```
captures the upstream repo, commit, and snapshot date (or reports that initialization is pending).
```
references/gotchas.md
```
provides a quick scan of common v4 migration pitfalls.

```
references/docs/
```
：本地生成的目录，包含Tailwind v4 MDX格式的文档快照。
```
references/docs-index.tsx
```
：本地生成的文件，包含文档侧边栏使用的分类及slug映射。
```
references/docs-source.txt
```
：记录上游仓库、提交记录及快照日期（或提示初始化待处理）。
```
references/gotchas.md
```
：提供v4迁移常见陷阱的快速概览。

MDX handling

MDX处理规则

Treat

export const title

and

export const description

as metadata.

Read JSX callouts like
```
<TipInfo>
```
or
```
<TipBad>
```
as guidance text.

将

export const title

和

export const description

视为元数据。

将
```
<TipInfo>
```
或
```
<TipBad>
```
等JSX提示组件内容视为指导文本。

Common entry points

常用入口

Migration:

references/docs/upgrade-guide.mdx

references/docs/compatibility.mdx

Gotchas overview:
```
references/gotchas.md
```
.

Configuration and directives:

references/docs/functions-and-directives.mdx

references/docs/adding-custom-styles.mdx

references/docs/theme.mdx

Variants and responsive patterns:

references/docs/hover-focus-and-other-states.mdx

references/docs/responsive-design.mdx

Core behavior:

references/docs/preflight.mdx

references/docs/detecting-classes-in-source-files.mdx

迁移：

references/docs/upgrade-guide.mdx

、

references/docs/compatibility.mdx

。

注意事项概览：
```
references/gotchas.md
```
。

配置与指令：

references/docs/functions-and-directives.mdx

、

references/docs/adding-custom-styles.mdx

、

references/docs/theme.mdx

。

变体与响应式模式：

references/docs/hover-focus-and-other-states.mdx

、

references/docs/responsive-design.mdx

。

核心行为：

references/docs/preflight.mdx

、

references/docs/detecting-classes-in-source-files.mdx

。

Migration checklist

迁移检查清单

When upgrading from v3 to v4, always confirm the following in the docs:

Browser support and compatibility expectations.

Tooling changes:

@tailwindcss/postcss

@tailwindcss/cli

@tailwindcss/vite

Import syntax:
```
@import "tailwindcss"
```
replaces
```
@tailwind
```
directives.
Utility renames/removals, prefix format, and important modifier placement.
Changes to variants, transforms, and arbitrary value syntax.

从v3升级至v4时，请务必在文档中确认以下内容：

浏览器支持及兼容性要求。

工具链变更：

@tailwindcss/postcss

、

@tailwindcss/cli

、

@tailwindcss/vite

。

导入语法：
```
@import "tailwindcss"
```
替代
```
@tailwind
```
指令。
工具类重命名/移除、前缀格式及!important修饰符的位置。
变体、变换及任意值语法的变更。

Update workflow

更新工作流

Run

scripts/sync_tailwind_docs.py

to refresh the snapshot. Use

--local-repo

if you already have a local clone of

tailwindlabs/tailwindcss.com

to speed up syncs. Always pass

--accept-docs-license

运行

scripts/sync_tailwind_docs.py

以刷新快照。若已本地克隆

tailwindlabs/tailwindcss.com

仓库，可使用

--local-repo

参数加速同步。请始终传入

--accept-docs-license

参数。