Tailwind CSS，某些自定义颜色不起作用

Question

我试图通过tailwind.config.js扩展编写一些主题来在我的项目中使用 Tailwind 自定义颜色。

\n

module.exports = {\n  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n  theme: {\n    extend: {\n      colors: {\n        s2condPurple: '#a32eff',     // works \xe2\xad\x95\xef\xb8\x8f\n        s2condPink: '#ff0099',       // works \xe2\xad\x95\xef\xb8\x8f\n        s2condOrange: '#ff5f55',     // works \xe2\xad\x95\xef\xb8\x8f\n        s2condYellow: '#ffe600',     // doesn't work \xe2\x9d\x8c\n        s2condLime: '#cdff64',       // works \xe2\xad\x95\xef\xb8\x8f\n        s2condMint: '#2af1b5',       // works at 'text-s2condMint' but not at 'border-s2condMint'\n        secondTest: '#ffe600',       // works \xe2\xad\x95\xef\xb8\x8f <-- I tested it for s2condYellow but it works perfectly!\n        s2condTest2: '#2af1b5',      // doesn't work \xe2\x9d\x8c\n        ...\n      },\n      \n    },\n  },\n  plugins: [],\n}\n\n

\n

我在代码中使用这些颜色，如下所示：

\n

const colorList: colorListType = {\n  life: 'white',\n  identity: 's2condPurple',\n  arts: 's2condPink',\n  industry: 's2condOrange',\n  knowledge: 'secondTest',\n  sports: 's2condLime',\n  languages: 'secondTest',\n}\n\nconst { [data.name.en.toLowerCase()]: color } = colorList\n...\n<button\n      className={`border focus:outline-none hover:border-${color} active:border-${color} ${\n        clicked ? `border-${color}` : 'border-textBlack'\n      } `}\n    >\n      <p className="text-white">{value.kr}</p>\n</button>\n

\n

我可以得到关于这个问题的线索吗？

\n

Answer 1

较新版本的 Tailwind 似乎只添加了代码中已使用的类。使用动态类（如示例中的类）时，您必须在safelist。

\n

以下是您可以执行此操作的一种方法的示例：

\n

module.exports = {\n    content: [\'./src/**/*.{js,jsx,ts,tsx}\', \'./public/index.html\'],\n    theme: {\n        extend: {\n            colors: {\n                s2condPurple: \'#a32eff\', // works \xe2\xad\x95\xef\xb8\x8f\n                s2condPink: \'#ff0099\', // works \xe2\xad\x95\xef\xb8\x8f\n                s2condOrange: \'#ff5f55\', // works \xe2\xad\x95\xef\xb8\x8f\n                s2condYellow: \'#ffe600\', // should work\xe2\xad\x95\xef\xb8\x8f\n                s2condLime: \'#cdff64\', // works \xe2\xad\x95\xef\xb8\x8f\n                s2condMint: \'#2af1b5\', // works at \'text-s2condMint\' but not at \'border-s2condMint\'\n                secondTest: \'#ffe600\', // works \xe2\xad\x95\xef\xb8\x8f <-- I tested it for s2condYellow but it works perfectly!\n                s2condTest2: \'#2af1b5\', // should work \xe2\xad\x95\xef\xb8\x8f\n            },\n        },\n    },\n    plugins: [],\n    safelist: [{\n            pattern: /(bg|text|border)-s2cond(Purple|Pink|Orange|Yellow|Lime|Mint|Test|Test2)/\n        }\n\n    ]\n}\n

\n

您可以在文档https://tailwindcss.com/docs/content-configuration#safelisting-classes中阅读更多相关信息中阅读有关此内容的更多信息。

\n

更新：2022 年 6 月 8 日

\n

如果您使用大量动态边距或尺寸，您可能需要将以下内容添加到您的safelist属性中。

\n

{\n  pattern: /(mt|mb|mr|ml|my|mx|px|py|pt|pb|pl|pr)-[0-9]+/\n},\n{\n  pattern: /flex-.*/\n},\n{\n  pattern: /(bottom|right|top|left)-[0-9]+/\n},\n{\n  pattern: /(w|h)-[0-9]+/\n}\n

\n

希望这可以节省其他人的时间。

\n

Answer 2

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

\n

这就是答案。

\n

<div class="text-{{ error ? \'red\' : \'green\' }}-600"></div>.   // \xe2\x9d\x8c\n<div class="{{ error ? \'text-red-600\' : \'text-green-600\' }}"></div>.  // \xe2\xad\x95\xef\xb8\x8f\n\n

\n

我以错误的方式做到了:(

\n