Django:Tailwind样式不适用于带有widget属性的模板变量

bqujaahr  于 2023-08-08  发布在  Go
关注(0)|答案(1)|浏览(110)

我试图在我的django web应用程序项目中应用daisyUI样式,我确信我会理解样式的变化:在我例子中,我尝试在django表单动态生成输入文本字段中添加一些daisyUI样式:

#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我应该有一个圆角的边界输入字段(与文本区域相同的想法)。
在模板的表单标签中添加{{form.title}},* 如下所示:what I getwhat I want**。
造型似乎被覆盖的地方,但我无法确定它来自哪里。。
我用tailwind-play tool的代码行得到了“我想要的”的截图
更多可能有用的信息:

  • 在我的电脑上,我安装了django-browser-reload。
  • 我的tailwind.config.js文件看起来像这样:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../**/templates/**/*.html"],
  theme: {
    extend: {},
  },
  daisyui: {
    themes: ['light', 'dark'],
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
}

  • 我确实尝试重新运行npm run tailwind-watch,使用cmd+shift+R刷新网页,并在每次我做一些更改时重新运行'pythonmanage.py runserver`,以查看样式是否正确应用
  • 我也尝试使用这个预先创建的django project(顺便说一句,这是一个很好的倡议!)并编辑模板,添加表单,出现同样的样式问题。

当寻找一些类似的问题(如this one)时,他们的样式问题似乎起源于使用顺风表单插件。但在我的情况下,我没有使用它..!
你知道这个问题来自哪里吗?
(我希望我的解释足够清楚,因为我没有开发人员背景,我“最常用”的编程语言是Python)
提前感谢您的善意回答和帮助??

tp5buhyn

tp5buhyn1#

在做了一些测试之后,我意识到问题来自于运行Django时,不知何故与表单字段相关的类属性(应该是顺风样式类)没有在运行npm tailwind-watch时生成的最终输出css文件中结束。
所以我猜,由于这些特定的类属性是由Django ->动态呈现的,它们最终不会被顺风编译器“监视”,并且相关的样式不会保存在输出css文件中。
无论如何,所有这些解释可能有点令人困惑,因为我对这里涉及的所有概念都不满意,我说的是我相信我理解的。* 如果有人有更好的理解,面对同样的问题,请通过回答/评论一些信息来贡献。🙏️

最后,这里是我用来让我的样式保存在tailwind css输出中的技巧:

我直接在模板中添加了一个隐藏的<div>标签,这些标签具有相同的属性类。

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

字符串
我将编辑我最初问题的标题,使它更清楚,因为我的问题与DaisyUI没有任何关系

相关问题