3. 安装方式总览：四种接入路径

本节目标：了解四种接入方式各自适合什么场景，选一个最适合你的开始动手。

v4 提供了四种安装方式，从”快速试一下”到”生产项目”都能覆盖。

四种方式一览

方式	适合场景	构建步骤	推荐度
Vite 插件	现代前端项目（React/Vue/Svelte）	无（Vite 内置）	⭐⭐⭐⭐⭐
PostCSS 插件	Next.js、Angular 等已有 PostCSS 的项目	需配 postcss.config	⭐⭐⭐⭐
Tailwind CLI	纯 HTML 项目、快速原型	需手动运行命令	⭐⭐⭐
Play CDN	学习、Demo、快速验证	无（浏览器直译）	⭐⭐（仅开发）

只要你用 Vite（Laravel、SvelteKit、React Router、Nuxt、SolidJS 都行），这是最丝滑的方式。

npm install tailwindcss @tailwindcss/vite

然后在 vite.config.ts 加一行：

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

CSS 里写：

@import "tailwindcss";

完事。启动 npm run dev 就能用了。

项目已经在用 PostCSS（比如 Next.js、Angular）？用这个。

npm install tailwindcss @tailwindcss/postcss postcss

创建 postcss.config.mjs：

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

CSS 里同样 @import "tailwindcss";。

不依赖任何构建工具，纯 HTML + CSS 项目。

npm install tailwindcss @tailwindcss/cli

CSS 里 @import "tailwindcss";，然后运行：

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

它会把 input.css 编译成 output.css，--watch 参数让文件变动时自动重编译。

CLI 还提供了独立可执行文件，不想装 Node.js 也能用。

不装任何东西，直接在 HTML 里加一个 <script>：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

然后在 <style type="text/tailwindcss"> 里可以写自定义主题：

<style type="text/tailwindcss">
  @theme {
    --color-clifford: #da373d;
  }
</style>

Warning

Play CDN 是浏览器端实时编译的，每次打开页面都要重新生成 CSS。不要用在生产环境，又大又慢。它只适合学习、做 Demo、或者在 CodePen 上快速验证一个想法。

Note

四种方式编译出来的工具类是一样的，学会一种换另一种只需要改安装步骤，不用改业务代码。

下一章开始，我们手把手把每种方式都装一遍。