当前位置：首页 > article >正文

Tailwind CSS - Tailwind CSS 引入（安装、初始化、配置、引入、构建、使用 Tailwind CSS）

article 2025/1/31 0:57:06

一、Tailwind CSS 概述

Tailwind CSS 是一个功能优先的 CSS 框架，它提供了大量的实用类（utility classes），允许开发者通过组合这些类来快速构建用户界面
Tailwind CSS 与传统的 CSS 框架不同（例如，Bootstrap），Tailwind 不提供预定义的组件，而是通过细粒度的类来控制样式，从而实现高度定制化的设计

二、Tailwind CSS 体验案例

1、安装 Tailwind CSS

执行如下指令，安装 Tailwind CSS

npm install -D tailwindcss

2、初始化 Tailwind CSS

执行如下指令，初始化 Tailwind CSS

npx tailwindcss init

初始化完成后，会生成 tailwind.config.js 配置文件

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

3、配置 Tailwind CSS

在 tailwind.config.js 配置文件中，自定义 Tailwind 的默认配置

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

4、引入 Tailwind CSS

在 CSS 文件 src/input.css 中引入 Tailwind 的基础样式、组件和实用类

@tailwind base;
@tailwind components;
@tailwind utilities;

5、构建 Tailwind CSS

执行如下指令，构建 Tailwind CSS，由 src/input.css 文件构建得到 src/output.css 文件

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

6、使用 Tailwind CSS

再 HTML 文件 src/index.html 中使用 src/output.css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./output.css" rel="stylesheet" />
        <title>index</title>
    </head>
    <body>
        <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </body>
</html>

三、Tailwind CSS 体验案例解读

1、`tailwind.config.js` 配置文件解读

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

（1）content

content 是一个数组，用于指定 Tailwind CSS 应该扫描哪些文件以自动检测并包含哪些 CSS 类
这基于 purgecss 的功能，用于移除未使用的 CSS，从而减小最终 CSS 文件的大小
在这里配置为 ["./src/**/*.{html,js}"]，这是一个 glob 模式，它匹配 src 目录下的所有 .html 和 .js 文件，其中 ** 表示匹配任意深度的子目录

（2）theme

theme 对象用于自定义 Tailwind CSS 的主题
可以在这里添加、修改、删除 Tailwind CSS 的默认主题变量，例如，颜色、间距、字体大小、边框半径等
extend 属性用于扩展 Tailwind CSS 的默认主题，而不是完全覆盖它

（3）plugins

plugins 数组用于添加 Tailwind CSS 插件，Tailwind CSS 插件用于扩展 Tailwind CSS 的功能

2、构建 Tailwind CSS 解读

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

npx tailwindcss：执行 Tailwind CSS 的 CLI 命令
-i ./src/input.css：-i 用于指定 Tailwind CSS 应该读取的源文件路径，这里 Tailwind CSS 将读取 src/input.css 文件中的样式信息，并根据 tailwind.config.js 文件中的配置进行处理
-o ./src/output.css：-o 用于指定 Tailwind CSS 处理后的文件应该保存到的路径
--watch：告诉 Tailwind CSS 的以监视模式运行，在监视模式下，Tailwind CSS 将持续监视输入文件及其依赖项的变化（例如，tailwind.config.js 配置文件、任何通过 @tailwind 指令引入的文件），一旦检测到变化，它将自动重新编译输出文件