文章/答案/技术大牛

发布

社区首页 >问答首页 >是否可以在编译时为DaisyUI (尾风)设置默认主题？

问是否可以在编译时为DaisyUI (尾风)设置默认主题？
EN

Stack Overflow用户

提问于 2022-07-24 16:03:09

回答 1查看 128关注 0票数 0

DaisyUI有默认主题，您可以使用data-theme属性(例如<html data-theme="cupcake"> )来更改它们。似乎默认的是light主题。

问题是，我希望能够将@apply指令与DaisyUI一起使用，以便在模板中使用边界元类名，在样式块中使用DaisyUI实用程序类。我似乎无法设置在编译时将被选中的默认设置。

在我的tailwind.config中，我尝试使用light主题来查看是否可以覆盖它，例如：

  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        light: {
          primary: '#EF3054',
          secondary: '#C67F43',
          accent: '#43AA8B',
          neutral: '#FBF5F3',
          base100: '#FFFFFF',
          info: '#3ABFF8',
          success: '#36D399',
          warning: '#FBBD23',
          error: '#F87272',
        },
      },
    ],
  }

但这不管用。我试着查看库本身，寻找如何在编译时覆盖默认主题的线索，但我看不出是如何覆盖的。

虽然有些人认为BEM与尾风是一个反模式，我自己也一直持有这一观点，但后来我改变了主意，认为额外的努力确实有助于消除模板的歧义，因为每当您需要进入它时，都允许定制CSS，所以请不要建议仅仅使用内联实用程序类，因为我知道这是可行的。

tailwind-css

daisyui

回答 1

Stack Overflow用户

发布于 2022-10-12 15:06:20

我不知道你到底有什么问题。但是一旦你改变了顺风配置，它就会工作。如果要用另一个主题更改默认主题，则需要一些代码。

但是现在你改变了你的轻主题，所以它将直接工作。

请再次检查您的content属性。我正在研究下一个JS。

我认为base100属性应该是base-100。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          primary: '#EF3054',
          secondary: '#C67F43',
          accent: '#43AA8B',
          neutral: '#FBF5F3',
          "base-100": '#FFFFFF',
          info: '#3ABFF8',
          success: '#36D399',
          warning: '#FBBD23',
          error: '#F87272',
        },
      },
    ],
  }
  ...

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73099971

复制

相似问题

问是否可以在编译时为DaisyUI (尾风)设置默认主题？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以在编译时为DaisyUI (尾风)设置默认主题？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以在编译时为DaisyUI (尾风)设置默认主题？
EN