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

安装

Installing 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

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

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

  • 工具优先的基础

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

  • 响应式设计

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

  • 悬停、聚焦、以及其他状态

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

  • 夜间模式

    使用夜间模式修饰符直接在 HTML 中针对夜间模式优化你的网站。

  • 重用样式

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

  • 自定义框架

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

Tailwind CSS 中文网 - 粤ICP备13048890号