Tailwind CSS 主页
  1. 开始使用
  2. 安装

安装

安装 Tailwind CLI

从头开始使用 Tailwind CSS 最简单、最快的方法是使用 Tailwind CLI 工具。如果你想在不安装 Node.js 的情况下使用它，CLI 也可用作独立的可执行文件。

  1. 安装 Tailwind CSS

    通过 npm 安装tailwindcss，并创建你的tailwind.config.js文件。

    终端
    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

    将每个 Tailwind 层的@tailwind指令添加到你的主 CSS 文件。

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

  4. 启动 Tailwind CLI 构建进程

    运行 CLI 工具以扫描你的模板文件以查找类并构建你的 CSS。

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

  5. 开始在你的 HTML 中使用 Tailwind

    将你编译的 CSS 文件添加到<head>并开始使用 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 的核心概念。

  • 实用优先基础

    使用实用程序优先的工作流从一组受限的原始实用程序构建复杂组件。

  • 响应式设计

    使用响应式修改器构建完全响应的用户界面，以适应任何屏幕尺寸。

  • 悬停、焦点和其他状态

    使用条件修改器设置交互状态（如悬停、焦点等）中的元素样式。

  • 暗模式

    使用暗模式修改器直接在你的 HTML 中为你的网站优化暗模式。

  • 重用样式

    通过创建可重复使用的抽象，管理重复并保持项目的可维护性。

  • 自定义框架

    自定义框架以匹配您的品牌，并使用您自己的自定义样式进行扩展。