如何解决如何为tailwind-css添加新颜色并保留原始颜色?
如何为默认方案添加颜色?这是我的tailwindcss文件。
const { colors: defaultColors } = require('tailwindcss/defaultTheme')
module.exports = {
"theme": {
"colors": defaultColors + {
"custom-yellow": {
"500": "#EDAE0A",}
},},};
解决方法
将自定义颜色值添加到主题>扩展> tailwind.config.js中的颜色部分
//tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'custom-yellow':'#BAA333',}
},},}
,
您可以简单地使用“数组/对象扩展运算符”(...)对其进行概括,并将它们全部收集在colors
变量中。
// tailwind.config.js
const { colors: defaultColors } = require('tailwindcss/defaultTheme')
const colors = {
...defaultColors,...{
"custom-yellow": {
"500": "#EDAE0A",}
module.exports = {
"theme": {
"colors": colors,}
};
,
试试这个代码然后重启localhost
`module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],darkMode: false,// or 'media' or 'class'
theme: {
extend:
{colors:
{
pinkSoft: '#EDC7B7',wheat: '#EEE2DC',gray: '#BAB2B5',blue: '#BADFE7',blue2: '#697184',pink: '#D8CFD0',bg: '#B1A6A4',bgDark: '#413F3D',variants: {
extend: {},plugins: [],}`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。