Tailwind CSS 入门

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

他快速、灵活、可靠，没有运行时负担。

安装

通过 Tailwind CLI 安装

从头开始使用 Tailwind CSS 的最简单、最快速的方法是使用 Tailwind CLI 工具。如果您不希望安装 Node.js, CLI 也可以作为独立的可执行文件使用。

安装 Tailwind CSS

通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

  1. npm install -D tailwindcss
  2. npx tailwindcss init
配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

  1. /** @type {import('tailwindcss').Config} */
  2. module.exports = {
  3.   content: ["./src/**/*.{html,js}"],
  4.   theme: {
  5.     extend: {},
  6.   },
  7.   plugins: [],
  8. }
将加载 Tailwind 的指令添加到你的 CSS 文件中

在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
开启 Tailwind CLI 构建流程

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

  1. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
在你的 HTML 代码中使用 Tailwind 吧

在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link href="/dist/output.css" rel="stylesheet">
  7. </head>
  8. <body>
  9.   <h1 class="text-3xl font-bold underline">
  10.     Hello world!
  11.   </h1>
  12. </body>
  13. </html>