Tailwind-DaisyUI 手风琴和开关不工作

Question

我已经设置了安装了Tailwind和Daisy UI 的Astro 项目，但我无法让 Daisy 控件工作。我从手风琴页面复制/粘贴代码，但是当呈现页面时，控件不起作用。就像控件是静态文本一样。范围和等级似乎有效，但 Switch 的作用就像一个复选框。

这是我的 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')]
}

看起来 DaisyUI 已加载且样式正常。DevTools 控制台中没有错误。我还可以检查什么？

Answer 1

您@tailwindcss/forms的依赖项与 DaisyUI 的手风琴不兼容。

如果您确实需要@tailwindcss/forms依赖项，一种方法是使用类来设置样式，而不是让它在所有元素上原子地执行

你的里面有这样的东西tailwind.config.js

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

然后遍历所有表单元素，根据文档手动应用相关类。

但在进行此重构之前，请尝试看看这是否是您的情况：require('@tailwindcss/forms')从您的中删除tailwind.config.js并查看手风琴是否有效。