In an attempt to update PHP version, I came up with some funky node issues oddly enough instead. I'm having some weird Tailwind 3.0 compiling issues where not all the color shades are appearing. The defaultTheme colors are not compiling right. I have colors in the tailwind-config.js but not all shades are appearing like the 700 for blue. I noticed if I put the colors I want in the array (view gray in the example attached), it works. Do I have to add every color shade? This suddenly just started happening. It was fine before the PHP update. I'm trying to use text-blue-700 and it can't find it.
Example of the setup: https://play.tailwindcss.com/HSzmza7os3?file=config
Has anyone else had this issue before where the defaultTheme won't pull in all the theme color shades?
You don't have to use defaultTheme if you're trying to add variations to the existing theme. Instead, you can put your color additions in the extend section of the config object. For example, to keep the default Tailwind classes like text-gray-500 and add your new ones:
module.exports = {
plugins: [],
theme: {
extend: {
colors: {
gray: {
lightest: '#F7F7F7',
lighter: '#f1f1f1',
light: '#e1e1e1',
default: '#57677A',
dark: '#C2CAD3',
darker: '#656565',
darkest: '#808080',
},
},
},
},
}
If you only want to use the default colors (no additions), you should not have to add anything to the config.
Working version of your example: https://play.tailwindcss.com/rKi0lRmivh
Related
I have been using tailwindcss for my react project and would now like to use daisy-ui in addition. I installed it as instructed and added the plugin to my tailwind.config. After doing this some of the designs in the page look off. In particular the ones styled with border-neutral-500, bg-neutral-500 - for these colors I also no longer see the little color indicator in vscode.
I am not using a custom theme but when looking at it it seems daisyUI is specifying its own version of the neutral color. https://daisyui.com/theme-generator/ vs https://tailwindcss.com/docs/customizing-colors - is this the source of the problem? How can I avoid this?
I guess there is really conflict with utilities. DaisyUI extending theme colors with its own
You may reassign neutral color palette again with default Tailwind values like
const colors = require('tailwindcss/colors');
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
neutral: colors.neutral,
}
}
},
plugins: [
require("daisyui")
],
}
This way both Tailwind bg-neutral-500 and Daisy btn-neutral (for example) will work
DaisyUI has default themes and you can change them with the data-theme attribute e.g. <html data-theme="cupcake">. It seems as though the default is the light theme.
The problem is that I want to be able to use the #apply directive with DaisyUI so that I can have BEM class names in the template and DaisyUI utility classes in the style block. It seems that I can't set a default that will be picked up at compile time.
In my tailwind.config I've tried using the light theme to see if I could overwrite it, e.g.:
plugins: [require('daisyui')],
daisyui: {
themes: [
{
light: {
primary: '#EF3054',
secondary: '#C67F43',
accent: '#43AA8B',
neutral: '#FBF5F3',
base100: '#FFFFFF',
info: '#3ABFF8',
success: '#36D399',
warning: '#FBBD23',
error: '#F87272',
},
},
],
}
But this doesn't work. I've tried looking into the library itself for clues into how I could overwrite the default theme at compile time but I can't see how.
Although some people consider BEM with Tailwind an anti-pattern, I had long held this view myself as well, I have since changed my mind and feel that the extra effort does help disambiguate your template with the added benefit of allowing bespoke CSS whenever you need to drop into it so please don't suggest just using the inline utility classes as I know this works.
I'm not sure what is your issue exactly.
But once you changed tailwind config, then it should work.
If you want to change your default theme with another one, it requires some code.
But now you changed your light theme, so it will directly work.
Please check your content property again. I'm working on Next JS.
And I think base100 property should be base-100.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: '#EF3054',
secondary: '#C67F43',
accent: '#43AA8B',
neutral: '#FBF5F3',
"base-100": '#FFFFFF',
info: '#3ABFF8',
success: '#36D399',
warning: '#FBBD23',
error: '#F87272',
},
},
],
}
...
Daisy UI has buttons: https://daisyui.com/components/button/
However, I'd like to override the colors for a specific button, without having to go through the effort of creating an entire theme.
I can just use bg-green-500 on a button, but that will just change the background color, when I also need to change all of the associated colors.
Is there a good way to do this?
AFAIK, to do this you override the current theme in the tailwind.config.js file.
Note that you import the theme's base:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: "#7cb3dd",
},
},
],
},
plugins: [require("#tailwindcss/typography"), require("daisyui")],
};
Here, we're overriding the primary color to #7cb3dd for the' light' theme.
Adjust as needed!
Here's more info:
https://daisyui.com/docs/themes/
I have my Tailwind classes defined like this:
<section class="dark:bg-gray-900 bg-hero-image bg-fixed">
So in the light version a background image is shown and on the dark version just gray-900 as background color.
The image is defined in tailwind.config.js like this:
theme: {
extend: {
backgroundImage: {
'hero-image': "url('/header.jpg')"
},
But this just doesn't work and still shows the image on dark mode.
You have to add backgroundImage to the variants in tailwind.config.js:
module.exports = {
variants: {
extend: {
backgroundImage: ["dark"],
},
},
ALSO you have to add dark:bg-none for the background-image to be set to none.
<section class="dark:bg-gray-900 dark:bg-none bg-hero-image bg-fixed">
This is also nessessary for things like invert and many other classes. Check the corresponding section in the docs, whether or not the variants are included by default.
By default, only responsive variants are generated for invert utilities.
https://v2.tailwindcss.com/docs/invert#variants
Please help. I am trying to use custom colors in Tailwind and have already installed... configured and gotten Tailwind to work in my project. I then added the custom colors into Tailwind and ran 'npm run build:css' from my package.json file and it runs successfully but I cannot get the colors to work. I have tried putting quotes around the colors and not the values and it still doesn't work. Here is my code.
module.exports = {
theme: {
extend: {
colors: {
limegreen: {
'50': '#FBFCF7',
'100': '#F8FBE1',
'200': '#EEF69E',
'300': '#DCEC53',
'400': '#A8D619',
'500': '#65DC21',
'600': '#429E04',
'700': '#357C06',
'800': '#295B09',
'900': '#20450A',
},
}
}
}
}
Your approach is correct. I tried the same in my code and it worked fine.
I would suggest using 'npm start' and refreshing the page after saving this code. The tailwind configuration file takes a little more time to show changes.
Besides, I would suggest writing the numbers without quotes.
Your syntax seems to be correct, you can also write it like this:
colors: {
secondary: "#FF0000",
silver: "#F3F3F3",
gray: {
dark: "#1f2d3d",
darkest: "#3c4858",
DEFAULT: "#777",
light: "#e0e6ed",
lightest: "#f9fafc",
naive: "#333333",
naiveHover: "#7F7F7F",
},
},
Make sure that the className is correct:
<div className="bg-limegreen-50"></div>
orr
<div className="text-limegreen-50"></div>