首页教程软件教程正文

如何在各类项目中使用Tailwind CSS

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 993 浏览 2934 个字

摘要 :

文章目录引入方式的考量 Tailwind的工作原理在项目中使用Tailwind的具体步骤（一）安装Tailwind和CLI （二）添加Tailwind样式（三）生成最终的CSS文件 Tailwind 4……

文
章
目
录

引入方式的考量
Tailwind的工作原理
在项目中使用Tailwind的具体步骤

（一）安装Tailwind和CLI
（二）添加Tailwind样式
（三）生成最终的CSS文件

Tailwind 4的配置

（一）配置集中化
（二）暗黑模式配置
（三）CSS layer的应用

总结与建议

本文将以Tailwind 4.x版本为例，详细探讨如何在各种项目中使用它。需要注意的是，虽然Tailwind 4.x与3.x版本在配置上存在差异，但基本原理是相通的。

引入方式的考量

Tailwind官网提供了许多常见框架接入Tailwind的示例。然而，当项目未使用这些框架时，不少开发者可能会对如何引入Tailwind感到迷茫。有一种简单的方法是直接通过CDN引入整个Tailwind的所有样式，只需在HTML文件中添加如下代码：

<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>

不过，这种方式存在一些弊端。对于小型项目而言，引入的文件体积偏大，运行JavaScript时会产生额外开销，并且在与依赖Tailwind的框架进行集成时，兼容性方面也存在不可控因素。因此，在本文中，我们不考虑这种引入方式。

Tailwind的工作原理

要想在任意项目中成功使用Tailwind，理解其工作原理是关键。Tailwind的工作机制是通过扫描特定文件（在3.x版本中是在配置里指定的所有文件），利用正则表达式匹配其中所有有效的Tailwind类，然后生成最终的CSS文件。

正是基于这样的原理，在编写代码时，我们不能通过字符串拼接的方式来添加类。比如下面这种做法是不推荐的：

function Button({ color, children }) {
    return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}

推荐使用变量到类的映射，以此保留完整的Tailwind类，示例如下：

function Button({ color, children }) {
    const colorVariants = {
        blue: \"bg-blue-600 hover:bg-blue-500\",
        red: \"bg-red-600 hover:bg-red-500\",
    };
    return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}

由于Tailwind的原理较为简单，从本质上来说，它对所使用的库或框架没有特殊要求。因此，在任何场景下，都可以借助Tailwind CLI来实现文件匹配和CSS生成。

在项目中使用Tailwind的具体步骤

（一）安装Tailwind和CLI

首先，在项目中安装Tailwind和Tailwind CLI，执行以下命令：

npm install tailwindcss @tailwindcss/cli

（二）添加Tailwind样式

在CSS文件中添加如下代码，引入Tailwind样式：

@import \"tailwindcss\";

这行代码就是Tailwind的核心，添加它之后，CLI就能将项目中用到的类注入到该CSS文件中。与3.x版本不同，4.x版本不再需要额外编写配置文件来添加主题色、扫描文件路径等。

（三）生成最终的CSS文件

安装和配置完成后，通过CLI生成最终的CSS文件，执行以下命令：

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

上述命令中，-i指定输入的CSS文件，-o指定输出的CSS文件，--watch表示开启监听模式，当源文件发生变化时会自动重新生成CSS文件。生成output.css后，将其引入项目，就完成了Tailwind的集成。

对于使用Vite、Next.js、SvelteKit等框架的项目，原理也是一样的，只不过这些框架通常会有插件或内置的postcss来帮助完成上述步骤。

Tailwind 4的配置

（一）配置集中化

在Tailwind 4中，配置主要集中在CSS文件里。像主题色、暗黑模式等配置都直接在CSS文件中编写，无需额外的配置文件。若需要读取以前的配置文件，则要在CSS文件中添加@config来读取。

（二）暗黑模式配置

在配置暗黑模式时，通常可以参考官网的方法：

@custom-variant dark (&:where(.dark, .dark *));

配置完成后，给顶层元素添加class=\"dark\"，这样在使用dark:前缀时，就相当于在前面加上了配置的条件。例如：

<html class=\"dark\">
    <body>
        <div class=\"bg-white dark:bg-black\">
            <!-- ... -->
        </div>
    </body>
</html>

同理，如果要在VSCode插件中适配暗黑模式，在CSS里添加如下代码即可：

@custom-variant dark (&:is([data-vscode-theme-kind=\"vscode-dark\"] *, [data-vscode-theme-kind=\"vscode-high-contrast\"] *));

按照同样的思路，还可以创建除亮色和暗色以外的多种主题。

（三）CSS layer的应用

Tailwind 4开始使用CSS layer，这是CSS的一个新特性，目前它的兼容性还不算太好，需要Chrome 99以上版本的浏览器才支持，即至少要是2022年发布的浏览器。简单来说，CSS layer给层叠样式表增加了一个宏观的层概念。

例如，Tailwind 4会自动生成如下的CSS layer：

@layer theme, base, components, utilities;

@layer theme {
    /* 没什么特别的 CSS */
}

@layer base {
    /* 没什么特别的 CSS */
}

@layer components {
    /* 没什么特别的 CSS */
}

@layer utilities {
    /* 没什么特别的 CSS */
}

CSS会按照@layer theme, base, components, utilities;的顺序逐层覆盖。如果这4个层中出现样式冲突，后面的层会覆盖前面的层。按照layer来组织CSS，可以让样式冲突的解决更加有条理。