Tailwind CSS Docs

Tailwind 的工作方式

安装页开头说明，Tailwind 会扫描所有 HTML 文件、JavaScript 组件和其他模板中的类名，生成对应的样式，再写入一个静态 CSS 文件。页面称它是 zero-runtime 的。

用 Vite 安装

Using Vite 标签页给出了六个步骤。第一步用 `npm create vite@latest my-project` 创建项目。第二步执行 `npm install tailwindcss @tailwindcss/vite` 安装包。第三步在 vite.config.ts 的 plugins 中加入 `tailwindcss()`。第四步在 CSS 文件中写入 `@import "tailwindcss";`。第五步运行 `npm run dev`，第六步就可以在 HTML 中使用工具类为元素添加样式。

页面说明，Vite 插件是与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成最顺畅的方式。页面同时列出 Using PostCSS、Tailwind CLI、Framework Guides 和 Play CDN 等其他安装方式。

框架指南

Framework Guides 标签页按框架给出安装指南，每张卡片附一句框架简介。卡片中可以看到 Next.js、Laravel、Nuxt、SolidJS、SvelteKit、Angular、Ruby on Rails 等框架。如果项目使用的框架在列表中，应优先按对应指南安装，而不是套用通用步骤。

暗色模式的两种切换方式

Dark mode 页面说明，dark: 前缀的工具类默认跟随系统偏好，即 prefers-color-scheme 媒体查询。页面给出的示例是 `bg-white dark:bg-gray-800`，同一个元素可以同时写浅色和深色的样式。

如果希望由网站自己控制主题，可以用 `@custom-variant dark (&:where(.dark, .dark *));` 覆盖 dark 变体，此后只要 HTML 树中存在 dark 类，dark: 工具类就会生效。也可以改用 data-theme 属性，例如 `[data-theme=dark]`。页面建议，切换状态可以用一小段 JavaScript 更新 class，并把偏好保存到 localStorage 中。

若要做成浅色、深色与跟随系统三种选择的切换器，页面建议使用 window.matchMedia() 检测系统主题，并据此更新 html 元素。

版本与升级

侧边栏的 Getting Started 分组列出 Installation、Editor setup、Compatibility 和 Upgrade guide 四个页面，其中包括兼容性说明和升级指南。