Tailwind CSS 环境安装与配置

工欲善其事,必先利其器。本章带你用三种方式安装 Tailwind:CDN(5 分钟体验)、Tailwind CLI(独立项目)、PostCSS(集成到现代框架)。选哪一种取决于你的项目类型。最后还会配置必备的 VS Code 插件。

三种安装方式怎么选?

CDN:适合学习、做 Demo、写单文件原型。零安装,但生产环境不推荐。
Tailwind CLI:适合纯静态站点(只有 HTML/CSS/JS,无构建工具)。
PostCSS 插件:适合用 Vite、Next.js、Astro、Vue CLI、Create React App 等现代构建工具的项目——这是最主流的方式。

方式一:CDN(最快体验)

如果你只想先用起来感受一下,Tailwind 官方提供了 Play CDN。在 HTML 的 head 里加一行 script 就能用全部功能:

<!-- 把这行加到 <head> 里即可,零配置 -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- 然后 HTML 里就能直接用 Tailwind 的类 -->
<div class="p-6 bg-blue-500 text-white rounded-xl">
  Hello Tailwind!
</div>

CDN 模式甚至支持内联配置,可以在页面里自定义主题:

<!-- CDN 模式也支持内联配置,在脚本后写一段 config -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: '#3b82f6',
        },
      },
    },
  };
</script>

<div class="bg-brand text-white p-4">自定义颜色生效</div>

但 Play CDN 在浏览器里实时编译,首屏慢、不能 Tree-shaking、JIT 调试信息也有限,只用于学习和原型:

<!-- 官方 Play CDN 适合学习和原型,生产环境不推荐:
     - 浏览器实时编译,首屏慢
     - 不能利用 Tree-shaking
     - 无法自定义 purge
     所以正式项目请用 CLI 或 PostCSS 方式 -->

方式二:Tailwind CLI(独立项目)

如果你写的是纯静态站点(比如手写 HTML + 少量 JS),用 Tailwind CLI 最直接。整个过程 5 步:

# 1. 用 npm 全局或本地安装 tailwindcss 命令行工具
npm install -D tailwindcss

# 2. 初始化配置文件(生成 tailwind.config.js)
npx tailwindcss init

# 3. 创建入口 CSS 文件 src/input.css,顶部加入三层指令
#    @tailwind base;
#    @tailwind components;
#    @tailwind utilities;

# 4. 启动监听,实时编译生成 dist/output.css
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# 5. HTML 里引入编译后的 CSS
#    <link rel="stylesheet" href="./dist/output.css">

关键点在于 content 字段——它告诉 Tailwind 去哪些文件扫描"用到的类",扫描完才会把这些类打包进最终 CSS。漏配会导致部分类不生效:

// tailwind.config.js
module.exports = {
  // content 字段极重要:告诉 Tailwind 去哪些文件扫描用到的类
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,vue,astro,svelte}',
    './index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

方式三:PostCSS 插件(现代框架首选)

99% 的真实项目用的是这种方式。Vite、Next.js、Astro、Nuxt、Remix、SvelteKit 等都基于 PostCSS,集成 Tailwind 只需要三步:

# 在 Vite / Next.js / Astro 项目里,推荐用 PostCSS 插件方式
npm install -D tailwindcss postcss autoprefixer

# 生成 postcss.config.js 和 tailwind.config.js
npx tailwindcss init -p

# 然后 src/style.css(或任意入口 CSS)里加这三行:
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

之后在项目里写组件时,直接在 className/class 里用 Tailwind 类即可,构建工具会自动扫描并打包。不需要手动运行 --watch,因为 PostCSS 已经集成进了开发服务器的管线。

框架专属提示

Next.js:从 13.x 起 create-next-app 会询问"是否使用 Tailwind",选 Yes 自动配好。
Astro:运行 npx astro add tailwind,官方集成一键搞定,会自动改用 Vite 的 Tailwind 插件。
Vite + Vue:手动装 tailwindcss postcss autoprefixer 并初始化即可,Vite 自带 PostCSS 支持。
CRA(Create React App):CRA 不直接支持 Tailwind 配置,需要用 craco/react-app-rewired 覆盖 PostCSS 配置,或迁移到 Vite。

必备:VS Code 插件

无论用哪种方式安装,VS Code 用户都强烈建议装官方插件 "Tailwind CSS IntelliSense"。它能带来:

智能补全:输入 p- 自动列出 p-1 到 p-96 并预览对应像素值。
悬停预览:鼠标悬停在 text-gray-700 上,显示色块和 RGB 值。
错误高亮:写错的类名(如 padd-4)会标红。
自动补全 class:在 class="..." 里触发补全。

开启"Tailwind CSS: Files: Exclude"还能让它跳过 node_modules,提升性能。

验证安装是否成功

最简单的验证方法:在 HTML 里写一个带 Tailwind 类的元素,刷新页面:

样式生效 → 安装成功。
看到原始 HTML 默认样式 → CSS 没被引入或 content 没扫到这个文件。
样式诡异 → 检查是不是同时引入了多个 CSS 框架,有冲突。

另外开浏览器开发者工具的 Network 面板,看 output.css 或编译后的 CSS 文件是否加载成功,体积是否合理(开发环境几十 KB,生产环境通常 10KB 以内)。

小结

到此你已经能在任何项目里跑起来 Tailwind。记住决策树:纯静态页面用 CDN 体验 → 独立静态站点用 CLI → 现代框架项目用 PostCSS 插件。装好后别忘了 VS Code IntelliSense 插件,它会大幅降低你的记忆负担。下一篇我们正式进入"思想"层面,聊聊什么是 utility-first。

← 上一篇 Tailwind CSS 简介

下一篇 Utility-first 原子化思想 →

✈️💬