如何使tailwindcss自定义颜色在Laravel 9中工作

Question

我在Laravel 9项目中安装了tailwindcss，并尝试添加自定义颜色。然后将其添加到webpack.mix.js中

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);

为了添加自定义颜色，我在tailwind.config.js文件中添加了类似于的颜色

const colors = require('tailwindcss/colors');
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
color: {
transparent: 'transparent',
current: 'currentColor',
'blue': '#71BBE2',
'orange': '#E28333',
'black': '#242121',
'gray': '#242121CC',
'lemon':  '#C3D14A',
'green': '#88B667',
'lime': '#F8FFF4',
'purple':  '#9D2883',
'white': '#FFFFFF'
},
extend: {},
},
plugins: [],
}

我已经运行了npm run watch，我可以看到laravel混合编译成功。现在，当我在视图文件中使用bg-orange时，如

<nav class="bg-orange">
<div class="mx-32 py-2">
//....
</div>
</nav>

浏览器中没有显示颜色，查看开发工具时，我看不到bg前缀的颜色

<nav class="bg-">
<div class="mx-32 py-2">
//....
</div>
</nav>

你知道问题可能是什么吗？

Answer 1

将color更改为colors。

theme: {
// the line below
color: { ...