Laravel mix 没有编译 Tailwind CSS .bg-color 类答案

【问题标题】：Tailwind CSS .bg-color classes aren't being compiled by Laravel mixLaravel mix 没有编译 Tailwind CSS .bg-color 类
【发布时间】：2021-06-05 03:42:16
【问题描述】：

我第一次在我的 Laravel 项目中使用 Tailwind CSS。我按照 Tailwind CSS 网站上的文档安装 Tailwind。经过一些使用，我注意到我的 .bg-color 类不起作用。最终，我意识到这些类甚至没有被编译，因为在 public/app.css 文件中没有名为 .bg-color 的类。据我所知，所有其他 CSS 类都可以工作。以前有没有人遇到过这个问题，或者有人如何解决这个问题？

这是我的 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("tailwindcss"),
    ]);

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

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      'maindarkblue' : "#061C23",
    },

    extend: {
      backgroundImage: theme => ({
        'plane1' : "url('/background_images/plane1.JPG')",
        'plane2' : "", 
        'mountains' : "url('/background_images/mountains.jpg')", 
        'skyline' : "", 
        'flower' : "", 
        'denzel1' : "", 
        'denzel2' : "",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这是我的资源/app.css

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base { 
    h1 { 
        @apply font-serif text-8xl text-maindarkblue;
    }
    
    h3 { 
        @apply font-serif font-light text-lg text-maindarkblue;
    }
}

非常感谢任何帮助。

【问题讨论】：

只有你的颜色不起作用，还是所有颜色都来自顺风？
我自己的自定义颜色是唯一有效的颜色。其余的则没有。
所以当我在 tailwind.config.js 文件中删除我的自定义颜色然后运行 npm run dev 时。默认颜色可以编译。似乎我在 tailwind.config.js 文件中添加了一些错误，但我不知道它可能是什么。

标签： javascript css laravel tailwind-css

【解决方案1】：

如果您仍想使用 Tailwind 的默认颜色，则需要扩展而不是完全覆盖配置中的 colors。

theme: {
    // ...
    extend: {
        // ...
        colors: {
            'maindarkblue': "#061C23",
        }
    }
}

【讨论】：

哇哦，非常感谢！那行得通。我犯了一个愚蠢的错误。