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

安装

安装 Tailwind CLI

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

  1. 安装 Tailwind CSS

    通过 npm 安装 tailwindcss，并创建 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。

    Terminal
    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 的核心概念。

  • Utility-First Fundamentals

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

  • Responsive Design

    使用响应式修饰符构建可适应任何屏幕尺寸的完全响应式用户界面。

  • Hover, Focus & Other States

    使用条件修饰符来为悬停、聚焦等交互状态下的元素设置样式。

  • Dark Mode

    使用暗模式修饰符直接在 HTML 中优化您的网站以适应暗模式。

  • Reusing Styles

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

  • Customizing the Framework

    定制框架来匹配您的品牌并使用您自己的自定义风格进行扩展。