Laravel TailwindCSS 添加更多颜色不起作用

Posted 2023-03-07

【中文标题】Laravel TailwindCSS 添加更多颜色不起作用

【英文标题】：Laravel TailwindCSS Adding more colors not working

【发布时间】：2021-11-19 02:18:40

【问题描述】：

就我而言，我想从 TailwindCSS 调色板中添加更多颜色。我现在得到的版本是：

├── @tailwindcss/forms@0.3.3
├── @tailwindcss/typography@0.4.1
└── tailwindcss@2.2.15

这是我的 tailwind.config.js 文件：

tailwind.config.js

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

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

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

    theme: 
        extend: 
            fontFamily: 
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            ,
            colors: 
                transparent: 'transparent',
                current: 'currentColor',
                amber: colors.amber,
                black: colors.black,
                blue: colors.blue,
                cyan: colors.cyan,
                emerald: colors.emerald,
                fuchsia: colors.fuchsia,
                gray: colors.trueGray,
                blueGray: colors.blueGray,
                coolGray: colors.coolGray,
                trueGray: colors.trueGray,
                warmGray: colors.warmGray,
                green: colors.green,
                indigo: colors.indigo,
                lime: colors.lime,
                orange: colors.orange,
                pink: colors.pink,
                purple: colors.purple,
                red: colors.red,
                rose: colors.rose,
                sky: colors.sky,//warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.
                teal: colors.teal,
                violet: colors.violet,
                yellow: colors.amber,
                white: colors.white,
            ,
        ,
    ,

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

然后我运行 npm run dev 并删除了我的 Firefox 缓存。

以下颜色类确实有效：

bg-amber-600 bg-green-600 bg-indigo-600 bg-blue-600 bg-orange-600 bg-sky-600 bg-red-600 bg-yellow-600

但是，以下颜色不起作用：

bg-black-600 bg-fuchsia-600 bg-gray-600 bg-emerald-600 bg-cyan-600 bg-lime-600 bg-pink-600 bg-purple-600 bg-rose-600 bg-teal-600 bg-紫罗兰色600 bg-blueGray-600 bg-coolGray-600 bg-trueGray-600 bg-warmGray-600

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) 
    mix.version();

为什么会这样？我如何解决它？那么如何导入所有颜色呢？不能把所有颜色都导入吗？

【参考方案1】：

这些是你得到的颜色https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js

例如，bg-black-600 不存在，默认顺风中没有黑色阴影，只有灰色阴影，其中一些具有替代名称的吸气剂

如果你没有得到这些，你可以尝试控制台记录你正在导入的颜色，看看你的依赖是否正确。

如果有些仍然无法正常工作，您可以手动将 js 复制到您的配置文件中。我还会在您的 CSS 包中快速搜索以 100% 检查颜色是否存在。此外，作为最终调试，您可以通过查看开发工具检查正在获取的 CSS 表来检查浏览器中使用的 CSS（对 bg-rose-600 之类的字符串进行搜索会起作用）

【讨论】：

谢谢！事实上，当我在 public/css/app.css 内搜索 bg-rose 时，颜色不存在。如何手动将 js 复制到我的配置文件中？也许我应该做一个额外的动作？ Laravel 混合？