Tailwind CSS 扩展了 tailwind.config.js 中的标准颜色。当我尝试扩展颜色时，所有其他颜色都被删除

Posted 2023-03-07

【中文标题】Tailwind CSS 扩展了 tailwind.config.js 中的标准颜色。当我尝试扩展颜色时，所有其他颜色都被删除

【英文标题】：Tailwind CSS extend standard colors in tailwind.config.js. When I try to extend colors, all other colors are deleted

【发布时间】：2021-03-11 21:05:39

【问题描述】：

当我尝试向 tailwind.css 添加一些颜色时，所有其他颜色都会被删除。 这是我的 tailwind.config.js 文件：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = 
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: 
        extend: 
            fontFamily: 
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            ,
        ,

        // colors: 
        //     smoke: 
        //         darkest: 'rgba(0, 0, 0, 0.9)',
        //         darker: 'rgba(0, 0, 0, 0.75)',
        //         dark: 'rgba(0, 0, 0, 0.6)',
        //         DEFAULT: 'rgba(0, 0, 0, 0.5)',
        //         light: 'rgba(0, 0, 0, 0.4)',
        //         lighter: 'rgba(0, 0, 0, 0.25)',
        //         lightest: 'rgba(0, 0, 0, 0.1)',
        //     ,
        // ,


        colors: 
            'smoke-darkest': 'rgba(0, 0, 0, 0.9)',
            'smoke-darker': 'rgba(0, 0, 0, 0.75)',
            'smoke-dark': 'rgba(0, 0, 0, 0.6)',
            'smoke': 'rgba(0, 0, 0, 0.5)',
            'smoke-light': 'rgba(0, 0, 0, 0.4)',
            'smoke-lighter': 'rgba(0, 0, 0, 0.25)',
            'smoke-lightest': 'rgba(0, 0, 0, 0.1)',
        ,


    ,

    variants: 
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    ,

    plugins: [require('@tailwindcss/ui')],
;

在我“运行 npm dev”之后，除了我尝试添加的颜色之外，没有其他颜色。 如何在不删除其他颜色的情况下添加这些颜色？

注释部分只是尝试不同的语法，它们的工作方式相同。

【参考方案1】：

您需要将颜色放在扩展对象中：

module.exports = 
  theme: 
    extend: 
      colors: 
        'smoke-darkest': 'rgba(0, 0, 0, 0.9)',
        'smoke-darker': 'rgba(0, 0, 0, 0.75)',
        'smoke-dark': 'rgba(0, 0, 0, 0.6)',
        'smoke': 'rgba(0, 0, 0, 0.5)',
        'smoke-light': 'rgba(0, 0, 0, 0.4)',
        'smoke-lighter': 'rgba(0, 0, 0, 0.25)',
        'smoke-lightest': 'rgba(0, 0, 0, 0.1)',
      
    
  

查看文档：https://tailwindcss.com/docs/customizing-colors#extending-the-defaults

【讨论】：

非常感谢！即使我已经阅读了文档，我还是错过了这个细微的差别......