1. 开始使用
  2. 使用 PostCSS

安装

开始使用 Tailwind CSS

Tailwind CSS 的工作原理是扫描你的所有 HTML 文件、JavaScript 组件以及任何其他模板中的类名,生成相应的样式,然后将它们写入静态 CSS 文件。

它快速、灵活且可靠 —— 零运行时。

将 Tailwind CSS 作为 PostCSS 插件安装

将 Tailwind CSS 作为 PostCSS 插件安装是将其与 Next.js 和 Angular 等框架集成最无缝的方式。

01

安装 Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/postcsspostcss

终端
npm install tailwindcss @tailwindcss/postcss postcss
02

将 Tailwind 添加到你的 PostCSS 配置

@tailwindcss/postcss 添加到你的 postcss.config.mjs 文件,或你的项目中配置 PostCSS 的任何位置。

postcss.config.mjs
export default {  plugins: {    "@tailwindcss/postcss": {},  }}
03

导入 Tailwind CSS

在你的 CSS 文件中添加一个 @import 来导入 Tailwind CSS。

CSS
@import "tailwindcss";
04

启动你的构建过程

使用 npm run dev 或你在 package.json 文件中配置的任何命令运行你的构建过程。 package.json 文件。

终端
npm run dev
05

开始在你的 HTML 中使用 Tailwind

确保你的编译后的 CSS 包含在 <head> 中(你的框架可能会为你处理此问题),然后开始使用 Tailwind 的实用类来设置你的内容样式。

HTML
<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/dist/styles.css" rel="stylesheet"></head><body>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></body></html>
您遇到困难了吗?在不同的构建工具中设置 Tailwind 与 PostCSS 可能会有些不同。查看我们的框架指南,看看我们是否为你特定的设置提供了更具体的说明。
版权所有 © 2025 Tailwind Labs Inc.·商标政策