saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.95k stars 1.29k forks source link

swap issue #1431

Closed FLasH3r closed 1 year ago

FLasH3r commented 1 year ago

@tailwindcss/forms is causing this issue - maybe state this in the docs?

swap checkbox is visible

package.json

"tailwindcss": "^3.2.4"
"@tailwindcss/forms": "^0.4.1",
"@tailwindcss/typography": "^0.5.7",
"daisyui": "^2.42.1",

in build:

🌼 daisyUI components 2.43.0  https://daisyui.com
  ✔︎ Including:  base, components, 2 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 

tailwind.config.js

 plugins: [
    require('@tailwindcss/forms'),
    require("@tailwindcss/typography"),
    require("daisyui")
  ],
  daisyui: {
    themes: ["fantasy","dark"],
  },

image image

image

image

image

image

saadeghi commented 1 year ago

What @tailwindcss/forms does is precisely described in its repo:

All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.

So when we install a plugin that says it applies style to all form elements by default, we can't expect otherwise.
This is not an issue. @tailwindcss/forms is simply doing its job.

If you really need @tailwindcss/forms alongside with daisyUI (which I doubt because both are doing the same job) consider using its strategy: 'class' config so it only applies style to the elements with specific class name (not all form elements)

Let me know if you have any questions.

aimehai commented 1 year ago

image image I still have this problem. @saadeghi can you help me please?

saadeghi commented 1 year ago

@aimehai Flowbite has a same class name .toggle as daisyUI's .toggle so using them together will mix the styles.
To avoid that when using daisyUI and Flowbite together you may want to add a prefix to only daisyUI class names. This avoids mixing the styles with the same class name coming from other CSS libraries.