Tailwind CSS .bg-color 类未被 Laravel mix 编译

Question

我在我的 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: [],
}

这是我的resources/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;
    }
}

非常感谢任何帮助。

Answer 1

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

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

Tailwind CSS .bg-color 类未被 Laravel mix 编译

Tailwind CSS .bg-color classes aren't being compiled by Laravel mix

javascript

css

laravel

tailwind-css

Tailwind CSS .bg-color 类 未被 Laravel mix 编译

Tailwind CSS .bg-color classes aren't being compiled by Laravel mix

javascript

css

laravel

tailwind-css

Tailwind CSS .bg-color 类未被 Laravel mix 编译