1. Getting Started
  2. Using PostCSS

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件和其他模板中的类名,生成相应的样式,并将其写入静态 CSS 文件。

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

使用 PostCSS 安装 Tailwind CSS

使用 PostCSS 安装 Tailwind CSS 是与 Next.js 和 Angular 等框架集成最无缝的方式。

01

Install Tailwind CSS

通过 npm 安装 tailwindcss@tailwindcss/postcsspostcss

Terminal
npm install tailwindcss @tailwindcss/postcss postcss
02

Add Tailwind to your PostCSS configuration

@tailwindcss/postcss 添加到 postcss.config.mjs 文件中,或在你项目中配置 PostCSS 的地方。

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

导入 Tailwind CSS

@import 添加到 CSS 文件中,导入 Tailwind CSS。

CSS
@import "tailwindcss";
04

启动构建过程

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

Terminal
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>
你是否卡住了? 使用 PostCSS 设置 Tailwind 在不同的构建工具中可能会有所不同。 检查我们的框架指南,看看我们是否有针对您的特定设置的更具体的说明。
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy