是否有一个合适的地方来放置你明确需要加载的tailwindcss类(除了内联注释)?

Question

我有一个array的颜色gray-200,red-200,blue-200,green-200，我还需要hover:和border-变体(例如hover:gray-200)。

如果我显式地添加注释(/* ... */)来解释排列的详尽列表(hover:gray-200,border-blue-200等)，样式将正确加载。大概是因为(可清除的html?)，我不能只是动态地创建这些(当我这样做时，CSS不会加载)。

内联注释感觉像是一个可以理解的位置，但不是放置所有注释的理想位置。有没有"属性"?在哪里做这件事(比如在配置文件或其他东西)，如果是这样，如何/在哪里?

如果这很明显，请原谅我的无知，我是顺风新手。

编辑:如果它很重要，我使用React和NodeJS和yarn。

Answer 1

正如您所提到的，您不能动态构建CSS类。为了工作，你需要在应用程序的某个地方提到完整的类名或安全列表。它可以是其他文件，注释或safelist节在Tailwind配置文件

请注意，没有hover:gray-200等实用程序，因为你需要具体的颜色(如文本-hover:text-gray-200，背景-hover:bg-gray-200等)

1。传递字符串数组

每个部分将按原样编译

// tailwind.config.js
module.exports = {
safelist: [
'text-gray-200',
'bg-gray-200',
'border-gray-200',
'hover:text-gray-200',
'hover:bg-gray-200',
'hover:border-gray-200',
// ....
],
}

2。在特定的文件中

创建和命名文件safelist.txt的常用模式，将其放在项目的根目录中并查看其内容。文件的内容可以是任意的，扩展名可以是任意的，名称可以是任意的，只有两条规则-它应该包含所需类的全名(如示例1)，并且该文件应该包含在内容部分

// tailwind.config.js
module.exports = {
content: [
// source files,
'./safelist.txt'
]
}

这两种方法都不理想，因为您需要自己编写大量的类。然而tailwind.config.js仍然是JS文件所以你可以这样做

3。使用映射

创建所需颜色实用程序的数组，并将它们映射到生成所需的类名。这样就可以是动态的

// tailwind.config.js
const colors = ['gray-200', 'red-200']
const safelist = colors.map(color => `text-${color} bg-${color} border-${color} hover:text-${color} hover:bg-${color} hover:border-${color}`)
module.exports = {
safelist:,
}

仍然不完美-有时事情可能是混乱和难以阅读，但它是简单的

4。正则表达式

最后，Tailwind为您提供了一种使用模式列出

的方法

// tailwind.config.js
module.exports = {
// an array of multiple patterns
safelist: [
{
pattern: /(bg|text|border)-(red|gray)-200/,
variants: ['hover'],
},
],
}

这里我们说的是安全列表组合的背景，颜色，边框颜色属性与红色200和灰色200实用程序加上悬停变体。变量可以是任何，如果你需要，你应该传递断点变量和它们的组合。看一下

// tailwind.config.js
module.exports = {
// just as example you can specify multiple patterns for each utility/variant combination
safelist: [
{
pattern: /(bg|text)-(red|gray)-200/,
variants: ['hover'],
},
{
pattern: /border-(red|gray)-500/, // another color
variants: ['hover', 'lg', 'lg:hover']
}
],
}

关于安全列表颜色的最后一件事-如果你留下像/(bg|text|border)-(red|gray)-200/这样的图案，它会安全列表包含的所有颜色实用程序(bg-gray-200/0,bg-gray-200/5,bg-gray-200/10等)。

/** part of compiled CSS file */
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity))
}
.border-red-200 {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity))
}
.border-gray-200/0 {
border-color: rgb(229 231 235 / 0)
}
.border-gray-200/5 {
border-color: rgb(229 231 235 / 0.05)
}
/** and so on - many-many classes */

如果你不打算使用不透明度变量，用$美元符号

完成你的图案

// tailwind.config.js
module.exports = {
// an array of multiple patterns
safelist: [
{
pattern: /(bg|text|border)-(red|gray)-200$/, // here is $ - no opacity utilities
variants: ['hover'],
},
],
}

这里-检查不同类型的安全列表配置和生成的CSS(底部的选项卡-它将显示所有编译的类)