How to use DaisyUI with Tailwindcss config "important:html"

[dohomi]

Hello,

I try to use Nativewind with DaisyUI and React-Native. I came across the issue, that I use the tailwindcss option:

module.exports = {
  important: 'html'
}

This enables higher priority of TailwindCSS classes compared to ReactNative styles. Now I bumped into the issue, that all DaisyUI class names are not prioritised:

html .gap-1{ }
.btn { }

Is there an option that all DaisyUI class names also getting higher priorities with the config?

https://tailwindcss.com/docs/configuration#important

Thanks!

[dohomi]

I found this issue on tailwindcss which seems to be related: https://github.com/tailwindlabs/tailwindcss/discussions/7393

[saadeghi]

I'm afraid this feature is not going to be added to daisyUI unless Tailwind CSS applies the important to plugins as well because daisyUI only adds the additional styles to Tailwind CSS and it's up to Tailwind CSS how to build the result CSS or apply changes.

However you can use PostCSS plugins like postcss-prefixwrap to add a wrapper selector to all CSS rules.

[grmkris]

I'm afraid this feature is not going to be added to daisyUI unless Tailwind CSS applies the important to plugins as well because daisyUI only adds the additional styles to Tailwind CSS and it's up to Tailwind CSS how to build the result CSS or apply changes.

However you can use PostCSS plugins like postcss-prefixwrap to add a wrapper selector to all CSS rules.

@saadeghi any tips how could I do this? I love using daisy on the web and now I also started learning react-native and I'm using nativeWind so having daisy would be awesome.

I was looking at https://github.com/dbtedman/postcss-prefixwrap docs but I'm a bit lost :(

[saadeghi]

However you can use PostCSS plugins like postcss-prefixwrap to add a wrapper selector to all CSS rules.

I can ...but this is an extremely rare situation. Adding a dependency for all users is not a good idea if only a small group are going to use them. There are a lot of PostCSS plugins which do cool stuff and we can use daisyUI with any of them. But should I add them all as dependencies? 😅

@saadeghi any tips how could I do this? I love using daisy on the web and now I also started learning react-native and I'm using nativeWind so having daisy would be awesome.

Install

npm i -D postcss-prefixwrap

Then add it to postcss.config.js.

module.exports = {
  plugins: [
    require('tailwindcss'),
+   require('postcss-prefixwrap')('html')
  ],
}

Here html is the wrapper element and it changes for example .btn to html .btn on your result CSS file.

Example: https://stackblitz.com/edit/daisyui-vite-hkrwz8?file=postcss.config.js