Search code examples
tailwind-cssastrojsdaisyui

Tailwind-DaisyUI accordion and switch are not working

I have set up Astro project that has Tailwind and Daisy UI installed, but I am unable to get Daisy controls to work. I copy/pasted the code from the accordion page, but when the page is rendered, the controls do not work. It's like the controls are static text. Range and rating seem to work, but then Switch acts just like a checkbox.

example

Here is my tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: ['./src/**/*.{astro,html,svelte,js,ts,jsx,tsx}'],
    daisyui: {
        themes: ['light', 'dark']
    },
    theme: {
        extend: {
            fontSize: {
                '45xl': '2.7rem',
                '10xl': '10rem',
                '11xl': '12rem',
                '12xl': '14rem',
                '13xl': '16rem',
                '14xl': '18rem'
            }
        }
    },
    plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('daisyui')]
}

It looks like DaisyUI loads and the styling works. There are no errors in the DevTools console. What else can I check?

enter image description here

Solution

  • You have @tailwindcss/forms in your dependencies, which is incompatible with the DaisyUI's accordions.

    If you really need the @tailwindcss/forms dependency one way is to use classes to style instead to let it do atomically all over the elements

    Something like this in your tailwind.config.js

    require('@tailwindcss/forms')({ strategy: 'class' })

    and then go thru all your form elements to manually apply the relative class as per the docs.

    But before going thru this refactoring, just try and see if this is your case: remove require('@tailwindcss/forms') from your tailwind.config.js and see if accordions work.