Tailwind CSS home page
  1. 入门
  2. 安装

安装

安装 Tailwind 命令行工具（CLI）

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

  1. 安装 Tailwind CSS

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

    Terminal
    npm install -D tailwindcssnpx tailwindcss init

  2. 配置模板文件的路径

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

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  3. 将加载 Tailwind 的指令添加到你的 CSS 文件中

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

    src/input.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. 开启 Tailwind CLI 构建流程

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

    Terminal
    npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

  5. 在你的 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）直接让你的网站支持夜间模式。

  • 重用样式

    通过创建可重用的抽象来管理冗余并保持项目的可维护性。

  • 自定义整个框架

    通过自定义整个框架使其匹配你的需求；使用你的自定义样式对其进行扩展。