安装
Tailwind CSS 通过扫描你的所有 HTML 文件、JavaScript 组件以及其他模板中的 class 名称,生成对应的样式,并将其写入静态 CSS 文件。
它快速、灵活且可靠 —— 零运行时(zero-runtime)。
将 Tailwind CSS 作为 PostCSS 插件安装,是与 Next.js 和 Angular 等框架集成的最无缝方式。
通过 npm 安装 tailwindcss
、@tailwindcss/postcss
和 postcss
。
npm install tailwindcss @tailwindcss/postcss postcss
在你的 postcss.config.mjs
文件(或项目中配置 PostCSS 的其他位置)中添加 @tailwindcss/postcss
。
export default { plugins: { "@tailwindcss/postcss": {}, }}
在你的 CSS 文件中添加一个 @import
,用于导入 Tailwind CSS。
@import "tailwindcss";
使用 npm run dev
或在你的 package.json
文件中配置的命令运行构建流程。
npm run dev
确保你的编译后 CSS 已包含在 <head>
中(你的框架可能会自动处理这一步),然后就可以开始使用 Tailwind 的工具类为内容添加样式了。
<!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>