Tailwind CSS home page
  1. 安装

Installation

Installing 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

    Install tailwindcss via npm, and create your tailwind.config.js file.

    Terminal
    npm install -D tailwindcssnpx tailwindcss init

  2. 配置模板路径

    Add the paths to all of your template files in your tailwind.config.js file.

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

  3. 将Tailwind指令添加到CSS

    Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

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

  4. 启动Tailwind CLI构建过程

    Run the CLI tool to scan your template files for classes and build your CSS.

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

  5. 开始在HTML中使用Tailwind

    Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

    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中为暗模式优化站点。

  • 重复使用样式

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

  • 自定义框架

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