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
Related
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'm porting an app using tailwindcss to work with IE11. Unfortunately, tailwindcss insists on generating colors using the modern W3C CSS Color Module Level 4 rgb() syntax, which does not appear to be working in IE, e.g. it generates classes like these:
.bg-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-bg-opacity));
}
I have tried using postcss-color-rgb in my postcss pipeline to transform this back into the usual syntax to no avail:
postcss([
require('tailwindcss')(twConfig),
require('postcss-color-rgb'),
require('autoprefixer'),
]).process(cssContent, {
from: css,
to: `build/${name}.css.tmp`
})
Tailwind claims to be compatible with any modern browser, which some might dare to classify IE11 as. Any thoughts on getting tailwind to play nicely with IE11 here?
Tailwind will use this syntax when the background opacity utilities are enabled.
If you disable it, it will use the regular hex syntax for colors, so you don't even need the postcss-color-rgb post css plugin anymore!
You can disable this by adding this to your tailwind.config.js:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
backgroundOpacity: false,
}
}
In my case, I had a similar issue with text and border colors. You might need to experiment and figure out which of these "opacity" utilities are causing you trouble. For my project, I disabled all of them:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
backdropOpacity: false,
backgroundOpacity: false,
borderOpacity: false,
divideOpacity: false,
ringOpacity: false,
textOpacity: false
}
}
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
I installed antd to the CRA project. And I made some of my own classes and override default andt css.
Then I wanted andt table component but with dark theme.
So installed dark theme using webpack but failed. So I tried with craco and worked fine.
Using craco-less, successfully installed dark-theme but now it is overriding my own css.
After I checked the reason in inspect mode, my css is overriding default andt css and dark theme is overriding mine.
Did anyone experience in this kinda problem? Thanks in advance.
Following antd's Customize-Theme guide you can use u craco config craco.config.js like the one in the example to override theme variables.
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '#primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
In my experience you have to use less files to override the less from antd, so try to move your custom styles into less files.
Check this thread too, for a detailed description.