Tailwindcss/forms plugin conflict

[jamesneal]

Just sharing this here in case it helps others:

Tailwind's "forms" plugin conflicts with a few DaisyUI features (Accordion & Collapse. Perhaps others?). If your accordions aren't expanding, this could be why.

The fix is to change the tailwindcss/forms plugin's strategy to "class". This prevents it from automatically styling all your form elements.

In your tailwind.config.cjs:

const daisyui = require('daisyui');
const typography = require('@tailwindcss/typography');
const forms = require('@tailwindcss/forms')({ strategy: 'class' });

/** @type {import('tailwindcss').Config}*/
const config = {
	content: ['./src/**/*.{html,js,svelte,ts}'],

	theme: {
		extend: {}
	},

	plugins: [typography, daisyui, forms]
};

module.exports = config;

[saadeghi]

Thank you.
I expected this to be obvious because @tailwindcss/forms clearly says that it applies styles to ALL form elements by default so it will create conflict with every other form styles.

However apparently a lot of developers don't pay attention, they install every plugin (even though they don't really need them all) and then get confused why it's not working as expected 😅

Fortunately @tailwindcss/forms provides a way to use it with class names instead of applying styles to tag names 👍

[jamesneal]

However apparently a lot of developers don't pay attention, they install every plugin (even though they don't really need them all) and then get confused why it's not working as expected 😅

Yep, that's definitely me! :)