Level 24
Hello, your code looks ok, it might be related to the cache. Also, consider put your extended colors into extend : { } see https://v2.tailwindcss.com/docs/customizing-colors#extending-the-defaults
Dec 13, 2021
16
Level 12
How to customize theme TailwindCSS colors in a Laravel project?
I want to use something like bg-magenta on a parent div, so I do the following:
- In
tailwind.config.js:
theme: {
colors: {
'magenta': '#ff00ff',
}
},
- Run
npm run dev
Result: I don't see the magenta color when I use it inside a div.
This has never worked smoothly for me, most of the time I stick with the defaults colours or when it does work it's after a while, like an hour after and I don't know what causes it to change. I have seen some videos here on Laracasts where they go through the exact same process but after they run npm run dev it works as soon as the page is refreshed. Has anyone experienced this before?
Level 12
@CharlesJ could you give more insight about the cache? I have tried deleting my browsers data: from Firefox menu I go to Preferences > Privacy & Safety > Cookies and web data > clear data or is it on npm cache? or route:cache? Thanks.
Level 24
@warpig i mean "Cached Web Content" instead of "cookies and web data" in order to reload images etc...
Level 12
@CharlesJ i see, I didn't know if you meant browser cache or app cache, im unaware of the root on this problem
Level 24
@warpig in fact, i don't think you need the quotes in 'magenta': '#ff00ff', just magenta: '#ff00ff',
Level 102
Be aware that you are overriding the default colors. Put them in extends to append
https://v2.tailwindcss.com/docs/customizing-colors#extending-the-defaults
Show your mix config file please
1 like
Level 12
@Sinnbeck I just moved the colors property to extends but same result. I got TailwindCSS installed for me when Breeze was installed.
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('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
Level 102
Does all other other tailwind class work? How are you using it? text-magenta?
Level 12
@Sinnbeck yes other default tailwind classes works, im using like this: bg-magenta and tried text-magenta
Level 102
Can you show your complete tailwind config file? What file are you trying to add the class in?
Level 12
@Sinnbeck I recently updated to Tailwind v3 from a Breeze, this is my config file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'regal-blue': '#243c5a',
}
},
},
variants: {
extend: {
opacity: ['disabled'],
backgroundColor: ['active'],
},
fill: ['hover', 'focus'],
},
plugins: [require('@tailwindcss/forms')],
};
The file would be my welcome.blade.php view which has both the app.css and app.js routes
Level 24
@warpig actually, in V3 , you can remove the variants part (https://tailwindcss.com/docs/upgrade-guide#remove-variant-configuration)
Level 12
Level 24
@warpig no it's not needed, "in Tailwind CSS v3.0, every variant is automatically available for every utility by default, so you can remove the variants section from your tailwind.config.js file" from the docs But well, it doesn't really mater in your color problem. Different ideas: can you try something like bg-[#243c5a] ? also i'm thinking it might be related to the name 'regal-blue', try without any dash to see, like 'regalblue'.
Level 1
In order to custom colors, you need to add this : const colors = require('tailwindcss/colors') to tailwind.config.js file then : add colors: { ...colors, }, in theme:
Level 2
@saidhr20 same here - solved my issues thanks for the tip !
Please or to participate in this conversation.