顺风某些自定义颜色在laravel 8欢迎页面中未生效



我正在尝试向tailwind.config.js添加一种自定义颜色,并将其用作背景或文本颜色,但它没有生效。奇怪的是,我之前在顺风配置中添加了其他自定义颜色,这些颜色都很好——只有我尝试添加的任何新颜色都不起作用。这是我的顺风。config.js

const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
colors:{
salmon: {
th1: '#B03060',    
},
tuna: {
th1: '#393B3E',    
},
wildblueyonder: {
th1: '#768DAE',
},
xanadu: {
th1: '#798578',
},
napa: {
th1: '#AC9F8F',
},    
cararra: {
th1: '#F6F7F4',    
},
kimberly: {
th2: '#7A81A8',
},
shakespeare: {
th2: '#53A7CE',
},
jordyblue: {
th2: '#8CCBF3',
},
softpeach: {
th2: '#FAF7F6',
},
softr: {
th2: '#FAF7F6',    
},
},
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('@tailwindcss/forms')],
};

这是我的视图刀片文件代码,我在其中使用登录a href标记中文本的颜色(text-salmon-th1(。

<div class="flex lg:justify-center">
<label class="bg-tuna-th1">test</label>
<a href="{{ route('login') }}"
class="inline-flex px-6 py-2 text-2xl font-semibold text-salmon-th1 transition duration-500 ease-in-out transform rounded-lg hover:bg-red-700 hover:to-red focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">@lang("Login")</a>
<a href="{{ route('register') }}"
class="inline-flex items-center text-2xl px-6 py-2 ml-4 font-semibold text-white transition duration-500 ease-in-out transform bg-red-800 rounded-lg shadow-xl hover:to-red hover:bg-red-700 hover:text-white focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">@lang("Register")</a>
</div>

我已经尝试过清除浏览器的缓存,清除laravel视图缓存。每次我更改顺风配置文件中的某些内容时,我都会尝试";npm跑步手表;或";npm运行dev";。我知道tailwindcss包含在页面中,因为其他颜色金枪鱼、wildblueyonder e.t.c只适用于我添加的新颜色,包括"三文鱼";不起作用。

我已经用尽全力寻找原因了。任何帮助都将不胜感激。

好吧,我觉得很愚蠢,但我明白了为什么它不起作用。这是因为公用文件夹比当前框架文件夹高出一步。当我运行";npm run dev";它在错误的文件夹中创建了带有app.css文件的公用文件夹。

为了解决这个问题,我不得不更改webpack.mix.js中的代码,并添加以下行。

我的路径

/public_folder_name/
/framework_folder_name/

将此行添加到webpack.mix.js文件

mix.setPublicPath('../public_folder_name/');

最新更新