背景
Tailwind CSS 是一款流行的 CSS 框架，它的灵活性和可定制性吸引了许多开发者的喜爱。另一方面，CSS Modules 是一个在 CSS 中使用本地作用域和模块化的方案。它允许我们在不同的组件中使用相同的类名而不会冲突。
然而，当我们在使用 Tailwind CSS 和 CSS Modules 时，可能会遇到一个问题：CSS Modules 中定义的类名无法正确地应用到 Tailwind CSS 中。这个问题的根本原因是，Tailwind CSS 使用的是引用未解析的类名来生成 CSS，这意味着在处理 CSS Modules 中定义的类名时，Tailwind CSS 找不到与之匹配的类名，从而无法生成正确的 CSS。
解决方案
解决这个问题的一个简单方法是使用 postcss-modules 插件。这个插件可以将 CSS Modules 中定义的类名转换为哈希值，并将转换后的哈希值与 Tailwind CSS 中使用的类名建立映射关系。这样，当我们在组件中使用 CSS Modules 中定义的类名时，Tailwind CSS 将可以找到与之匹配的类名，从而生成正确的 CSS。
我们可以通过以下步骤将 postcss-modules 插件添加到 Tailwind CSS 中：
- 安装 postcss-modules，并将其添加到项目的
devDependencies中：
npm install --save-dev postcss-modules
- 添加一个新的 postcss 插件到项目的
postcss.config.js文件中：
module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-modules')({
generateScopedName: '[name]__[local]___[hash:base64:5]',
}),
],
}上述配置中：
generateScopedName选项指定了转换后的类名的格式，它包含了原始文件名、本地类名和哈希值，这个格式可以根据需要进行修改。
- 在项目中使用 CSS Modules 时，通过
import引入对应的 CSS 文件，并使用它定义的类名：
-- -------------------- ---- -------
-- ----------------- --
------- -
------ ----------- ---------- --------- ---- ---- --------
-
-- --------- --
------ ------ ---- ---------------------
-------- -------- -
------ -
------- --------------------------
----- --
---------
-
-在上面的示例中，我们定义了一个 .button 类名，并使用 @apply 指令将 Tailwind CSS 中的一些类名应用到它上面。我们在 button.js 文件中通过 import 引入了 styles.module.css 文件，并使用其中定义的 .button 类名。
当我们构建项目时，postcss-modules 插件将会把 .button 转换为一个哈希值，并将它与 Tailwind CSS 中的对应的类名建立映射关系。最终的 CSS 将包含类似于下面的代码：
-- -------------------- ---- ------- ------------------------ - ----------------- -------- ------ ----- ------------ ---- ------------ ------- --------------- ------- ------------- ----- -------------- ----- -------------- -------- -
这样，我们就可以在组件中使用 CSS Modules 中定义的类名，并能够正确地应用 Tailwind CSS 中定义的样式了。
结论
在使用 Tailwind CSS 和 CSS Modules 时，我们可能会遇到一些问题。使用 postcss-modules 插件可以解决其中的一个问题，即在 CSS Modules 中定义的类名无法正确地应用 Tailwind CSS 样式的问题。
要解决这个问题，我们需要安装 postcss-modules，并将它添加到 Tailwind CSS 的 postcss 插件列表中。然后，我们可以在项目中使用 CSS Modules，通过 import 引入对应的 CSS 文件，并使用其中定义的类名。最终，postcss-modules 插件将会将 CSS Modules 中定义的类名转换为哈希值，并将它与 Tailwind CSS 中对应的类名建立映射关系，从而可以正确地应用 Tailwind CSS 样式。
希望这篇文章可以帮助你解决遇到的问题，并为你日后的开发工作提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775d0426d66e0f9aa05d6f7