Javascript Tailwind CSS.bg颜色类不是';t由Laravel mix编译

Javascript Tailwind CSS.bg颜色类不是';t由Laravel mix编译,javascript,css,laravel,tailwind-css,Javascript,Css,Laravel,Tailwind Css,在我的Laravel项目中,我第一次使用了Tailwind CSS。我按照Tailwind CSS网站上的文档安装了Tailwind。使用了一段时间后,我发现我的.bg颜色类不起作用。最后,我意识到这些类甚至没有被编译,因为public/app.css文件中没有名为.bg color的类。据我所知,所有其他CSS类都可以工作。以前有人遇到过这个问题吗?或者有人知道如何解决这个问题吗 这是我的webpack.mix.js文件 const mix = require('laravel-mix');

在我的Laravel项目中,我第一次使用了Tailwind CSS。我按照Tailwind CSS网站上的文档安装了Tailwind。使用了一段时间后,我发现我的.bg颜色类不起作用。最后,我意识到这些类甚至没有被编译,因为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的默认颜色,您需要扩展而不是完全覆盖配置中的
颜色

主题:{
// ...
扩展:{
// ...
颜色:{
'maindarkblue':“#061C23”,
}
}
}

只有您的颜色不起作用,或者所有来自tailwind的颜色?我自己的、定制的颜色是唯一起作用的颜色。其余的没有。因此,当我删除tailwind.config.js文件中的自定义颜色,然后运行npm run dev时,默认颜色会编译。似乎我在tailwind.config.js文件中添加了一些错误,但我不知道可能是什么。噢,哇,非常感谢!成功了。我犯了愚蠢的错误。