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

Question

就我而言，我想从 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();
}

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

Answer 1

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

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

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

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