我试图在我的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 get与what 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)
提前感谢您的善意回答和帮助??
1条答案
按热度按时间tp5buhyn1#
在做了一些测试之后,我意识到问题来自于运行Django时,不知何故与表单字段相关的类属性(应该是顺风样式类)没有在运行
npm tailwind-watch
时生成的最终输出css文件中结束。所以我猜,由于这些特定的类属性是由Django ->动态呈现的,它们最终不会被顺风编译器“监视”,并且相关的样式不会保存在输出css文件中。
无论如何,所有这些解释可能有点令人困惑,因为我对这里涉及的所有概念都不满意,我说的是我相信我理解的。* 如果有人有更好的理解,面对同样的问题,请通过回答/评论一些信息来贡献。🙏️
最后,这里是我用来让我的样式保存在tailwind css输出中的技巧:
我直接在模板中添加了一个隐藏的
<div>
标签,这些标签具有相同的属性类。字符串
我将编辑我最初问题的标题,使它更清楚,因为我的问题与DaisyUI没有任何关系