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',
},
},
],
}
...
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
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
So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1...
That's my tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
There are some things that you should check:
Make sure that you put the tailwind classes in className attribute instead of class attribute
Do not use string concatenation to create class names. So, instead of writing <div class="text-{{ error ? 'red' : 'green' }}-600"></div>, write <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Make sure that all your files are included in the purge command. Since you only specify './src/**/*.{js,jsx,ts,tsx}', this meant that tailwind will only scan what class should not be purged on those files with those extensions. This means that if you use tailwind classes in html files, tailwind will not scan those files. Also the same case if you somehow have files outside of ./src.
For me, I had to ensure that I was including all of the file types in my purge array within tailwind.config.js. Hope this helps someone - mine was missing the .vue files.
My Laravel tailwind purge array now looks like:
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
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.
I am trying to generate a static website out of my (minimal) code with Nuxt. In that code, I integrate in particular the tailwindcss toolkit as well as vue2-leaflet. Upon
nuxt generate
I get two css files, one for the tailwindcss css and the other for the leaflet css. While the former file is fine and contains everything I need, the latter is pretty sparse:
.leaflet-tile-pane{z-index:200}#-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}#keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}
Of course, that makes my map render in a pretty strange way, because most of the css is missing. Here's my current nuxt.config.js:
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
{ src: '~plugins/leaflet.js', mode: 'client' }
],
buildModules: [
'#nuxtjs/tailwindcss'
],
modules: ['#nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],
[...]
build: {
extractCSS: true,
}
}
Getting rid of the extractCSS ends up incorporating all the relevant css into the index.html. It works, but then I get the following error:
ERROR Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode
I'm not sure I understand how that whole css extraction works. Could someone enlighten me? Why is it not working with extractCSS: true? How can I make it work? Why is it working in SPA mode but not in static mode?
You are using nuxt-purgecss which is using purgecss to strip unused CSS.
purgecss do scan HTML (or vue) files for CSS classes in use and then strip unused classes from final CSS bundle.
You can take a look at default purgecss configuration used by nuxt-purgecss here. The paths lists the paths purgecss will scan for CSS usage.
Because you are not using most of the leaflet css directly (in your components), its is necessary to configure purgecss to don't remove leaflet's css.
You can do that by whitelisting (btw not sure if "comment" method will work in Vue\Nuxt)
You can read more here and here
Not tested!!
// nuxt.config.js
{
purgeCSS: {
whitelistPatterns: [/leaflet/, /marker/]
}
}
Regarding the error message
Error message is from nuxt-purgecss module - it is clearly documented here
I don't have deep knowledge of Nuxt build process. So I just assume from the docs that extractCSS: true will use extract-css-chunks-webpack-plugin to extract all CSS to separate CSS file, while (default) extractCSS: false will use PostCSS to extract all CSS and put it directly into the <style> tag of rendered page.
All of that doesn't matter IMHO because the root problem is the use of purgecss and the solution is to configure it correctly to whitelist leaflet CSS classes....