Javascript Tailwind CSS.bg颜色类不是';t由Laravel mix编译
在我的Laravel项目中,我第一次使用了Tailwind CSS。我按照Tailwind CSS网站上的文档安装了Tailwind。使用了一段时间后,我发现我的.bg颜色类不起作用。最后,我意识到这些类甚至没有被编译,因为public/app.css文件中没有名为.bg color的类。据我所知,所有其他CSS类都可以工作。以前有人遇到过这个问题吗?或者有人知道如何解决这个问题吗 这是我的webpack.mix.js文件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');
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文件中添加了一些错误,但我不知道可能是什么。噢,哇,非常感谢!成功了。我犯了愚蠢的错误。