Tailwind CSS 入门
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。
他快速、灵活、可靠，没有运行时负担。
安装
从头开始使用 TailWind CSS 的最简单、最快的方法是使用 TailWind CLI 工具。如果您想在不安装 Node. js 的情况下使用它，CLI 也可以作为独立的可执行文件使用。
安装 Tailwind CSS
通过 npm 安装
tailwindcss，然后创建你自己的tailwind.config.js配置文件。Terminalnpm install -D tailwindcssnpx tailwindcss init配置模板文件的路径
在
tailwind.config.js配置文件中添加所有模板文件的路径。tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }将加载 Tailwind 的指令添加到你的 CSS 文件中
在你的主 CSS 文件中通过
@tailwind指令添加每一个 Tailwind 功能模块。src/input.css@tailwind base; @tailwind components; @tailwind utilities;开启 Tailwind CLI 构建流程
运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。
Terminalnpx tailwindcss -i ./src/input.css -o ./src/output.css --watch在你的 HTML 代码中使用 Tailwind 吧
在
<head>标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。src/index.html<!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>
接下来
熟悉一些让 Tailwind CSS 区别于 传统方式编写 CSS 的核心概念。
工具类优先（Utility-First）的基本原理
遵循工具类优先的流程（utility-first workflow）并基于一套具有约束性的基本工具类来构建 复杂的组件。
响应式设计
使用响应式布局标识符（responsive modifiers）构建完全支持响应式布局的用户界面，以适应任何大小的 屏幕。
鼠标悬停、聚焦以及其他状态
使用条件标识符（conditional modifiers）可以为处于交互状态（如鼠标悬停、聚焦等）中的元素设置 样式。
夜间模式（Dark Mode）
通过在 HTML 代码中添加夜间模式标识符（dark mode modifier）直接让你的网站支持夜间模式。
重用样式
通过创建可重用的抽象来管理冗余并保持项目的可维护性。
自定义整个框架
通过自定义整个框架使其匹配你的需求；使用你的自定义样式对其进行扩展。