安装
Tailwind CSS 通过扫描你的所有 HTML 文件、JavaScript 组件以及其他模板中的 class 名称,生成对应的样式,并将其写入静态 CSS 文件。
它快速、灵活且可靠 —— 零运行时(zero-runtime)。
从零开始使用 Tailwind CSS 最简单、最快速的方式就是使用 Tailwind CLI 工具。CLI 也可以作为独立可执行文件获取,如果你希望在不安装 Node.js 的情况下使用它。
通过 npm 安装 tailwindcss
和 @tailwindcss/cli
。
npm install tailwindcss @tailwindcss/cli
在你的主 CSS 文件中添加 @import "tailwindcss";
导入语句。
@import "tailwindcss";
运行 CLI 工具,扫描你的源码文件中的类并构建 CSS。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
将你编译后的 CSS 文件添加到 <head>
中,然后开始使用 Tailwind 的工具类为内容添加样式。
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>