我正在try 将daisyUI样式应用到我的Django Web应用程序项目中,并且我肯定了解样式的作用:在我的例子中,我try 将一些daisyUI样式添加到由Django表单动态生成的输入文本字段中:

#forms.py

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = '__all__'
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control input input-primary w-full max-w-xs', 'placeholder':'Title'}),
            'description': forms.Textarea(attrs={'class': 'textarea textarea-primary w-full'})
        }
...

关于这个daisyUI docs page,I should have a rounded bordered input field(与文本区域相同的 idea ).

在我的模板103的表单标记内添加{{form.title}}.

样式似乎在某处被覆盖,但我无法确定这是从哪里来的……

我用我的代码行得到了"What I Want"的屏幕截图

更多可能有用的信息:

  • 在我的电脑本地,我安装了Django-Browser-ReLoad.
  • 我的trawind.config.js文件如下所示:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../**/templates/**/*.html"],
  theme: {
    extend: {},
  },
  daisyui: {
    themes: ['light', 'dark'],
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
}

  • 我确实try 了重新运行npm run tailwind-watch,使用cmd+shift+R刷新网页,并在每次进行一些更改以查看样式是否正确应用时重新运行‘pythonManage.py runserver`

  • 我还try 使用这个预先创建的django project(顺便说一句,这是一个很好的举措!)并编辑模板,添加一个表单,结果出现了相同的样式问题.

当寻找一些类似的问题(如this one)时,他们的样式问题似乎起源于tailwind form plugin. But in my case I'm not using it..!的使用

你知道这个问题可能来自哪里吗?

(我希望我的解释足够清楚,因为我没有开发人员的背景,而且到目前为止我"最常用的"编程语言是Python)

预先感谢您的友好回答和帮助?

推荐答案

在做了几个测试之后,我意识到问题来自于这样一个事实:在运行Django时,不知何故在运行npm tailwind-watch时构建了the class attributes associated with my form fields(并且应该是tailwind 样式类)don't end up in the final output css file.

因此,我猜想,由于那些由Django动态呈现的特定类属性最终不会被tailwind 编译器"监视",因此关联的样式也不会保存在输出的CSS文件中.

无论如何,所有这些解释都可能有点令人困惑,因为我对这里涉及的所有概念都不太适应,我说的是我认为我理解的东西.If anyone has a better understanding, and having faced the same issue, you are welcome to contribute by answering/commenting with some informations.?✌️

最后,下面是我用来将我的样式保存到tailwind CSS输出中的诀窍:

I added a hidden 100 tag with the same attributes classes in the widget elements directly in the template.

<div class="form-control input input-primary w-full max-w-xs hidden"></div>

我将编辑我最初问题的标题以使其更清楚,因为我的问题实际上与DaisyUI没有任何关系

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时,如何隐藏它

正确的`最小/最大宽度`+`非(设备类型)`css媒体查询的语法

输入中的框始终显示在MUI文本字段中

使用CSS Grid是否可以跳过下一列?

Nextjs Tailwind Marquee 组件溢出

没有字母间距的CSS悬停边框

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 做一个像CodeSandbox的console那样的可拖拽的split panel

    问题定位位置:Tailwindcss 中的绝对元素

    如何为以下布局安排网格?

    Nativewind 的某些样式不适用于本机 (Android),但它们适用于网络

    为什么这个绝对定位的 ::after 伪元素会崩溃,除非父级有过滤器?

    停止 div 推动另一个 div 做出react

    如何为柔和的配色方案提供易于使用的高对比度替代方案?

    CSS - 等高列?

    纯 CSS 复选框图像替换

    iPhone X / 8 / 8 Plus CSS 媒体查询

    使用边距:0 自动;在 Internet Explorer 8 中

    输入和文本字段中的背景 colored颜色

    CSS:悬停一个元素,多个元素的效果?