我试着使用文档中提到的琥珀色和青柠色。这些颜色不起作用。只有名称与原色名称相同的颜色(例如红色、粉红色)才起作用。不起作用的颜色:琥珀色、祖母绿色、石灰色、玫瑰色、紫红色、板岩色、锌色,甚至橙子。我用的是2.26版本,但是我用顺风操场检查了一下1.9到2.25之间的版本,这些颜色还是不行。即使在操场上,这些颜色名称也不建议使用。为什么我不能使用这些颜色?
krcsximq1#
这是Tailwind版本3的文档,它具有expanded color palette。您要么需要更新到这个版本,要么使用版本2文档https://v2.tailwindcss.com/docs/customizing-colors#extending-the-defaults并手动展开palette,如下所示:
// tailwind.config.js const colors = require('tailwindcss/colors') module.exports = { theme: { extend: { colors: { amber: colors.amber, emerald: colors.emerald, } } } }
有关v2颜色自定义的详细信息调色板参考v2所以,如果你想配置你的调色板,只需阅读这个v2文档。
vddsk6oq2#
如果您使用PostCSS 7兼容版本(https://www.npmjs.com/package/@tailwindcss/postcss7-compat),则需要将颜色添加到tailwind.config.js,如下所示:
tailwind.config.js
const colors = require('tailwindcss/colors') module.exports = { theme: { extend: { colors: { stone: colors.warmGray, sky: colors.lightBlue, neutral: colors.trueGray, gray: colors.coolGray, slate: colors.blueGray, } } } }
**解释:**我遇到了同样的问题(兼容性构建),所以我做了一些挖掘,在colors.d.ts中发现了以下内容,这意味着您可以将上述内容添加到项目中的tailwind.config.js文件中,以使用与其v3实用程序类名相同的颜色(例如“bg-neutral-800”)。
colors.d.ts
/** * @deprecated renamed to 'sky' in v2.2 */ lightBlue: TailwindColorGroup; /** * @deprecated renamed to 'stone' in v3.0 */ warmGray: TailwindColorGroup; /** * @deprecated renamed to 'neutral' in v3.0 */ trueGray: TailwindColorGroup; /** * @deprecated renamed to 'gray' in v3.0 */ coolGray: TailwindColorGroup; /** * @deprecated renamed to 'slate' in v3.0 */ blueGray: TailwindColorGroup;
x7rlezfr3#
试试这个:
const colors = require('tailwindcss/colors') module.exports = { theme: { extend: { colors: { //just add this below and your all other tailwind colors willwork ...colors } } } }
3条答案
按热度按时间krcsximq1#
这是Tailwind版本3的文档,它具有expanded color palette。
您要么需要更新到这个版本,要么使用版本2文档https://v2.tailwindcss.com/docs/customizing-colors#extending-the-defaults并手动展开palette,如下所示:
有关v2颜色自定义的详细信息
调色板参考v2
所以,如果你想配置你的调色板,只需阅读这个v2文档。
vddsk6oq2#
如果您使用PostCSS 7兼容版本(https://www.npmjs.com/package/@tailwindcss/postcss7-compat),则需要将颜色添加到
tailwind.config.js
,如下所示:**解释:**我遇到了同样的问题(兼容性构建),所以我做了一些挖掘,在
colors.d.ts
中发现了以下内容,这意味着您可以将上述内容添加到项目中的tailwind.config.js
文件中,以使用与其v3实用程序类名相同的颜色(例如“bg-neutral-800”)。x7rlezfr3#
试试这个: