Django:Tailwind 样式未应用于带有小部件属性的模板变量。

huangapple go评论66阅读模式
英文:

Django : Tailwind styling not applied to template variables with widget attributes

问题

我尝试在我的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文档页面我应该有一个带圆角边框的输入字段(文本区域也是同样的道理)。

在我的模板中的表单标签内添加{{form.title}}这是它的实际效果:
我得到的 vs. 我想要的

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

我使用我的代码行得到了“我想要的”的截图,使用了这个tailwind-play工具

可能有用的更多信息:

  • 在我的计算机上本地安装了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刷新了网页,并在每次进行更改后重新运行了python manage.py runserver,以查看样式是否被正确应用。

  • 我还尝试使用了这个预创建的django项目(顺便说一句,这是一个很好的倡议!)并编辑了模板,添加了一个表单,但出现了相同的样式问题。

在寻找一些类似问题时(比如这个),他们的样式问题似乎起源于使用了tailwind表单插件。但在我的情况下,我没有使用它!

这个问题可能来自哪里呢?

(希望我的解释足够清楚,因为我没有开发者背景,迄今为止我的“最常用”编程语言是Python)

提前感谢您的答复和帮助! 🙏

英文:

I'm trying to apply daisyUI styling in my django web-app project, and I'm note sure to understand what's happening with the styling : in my case, I try to add some daisyUI styling to an input text field generated dynamically by a django form :

#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'})
        }
...

regarding this daisyUI docs page, I should have a rounded bordered input field (same idea with textarea).

Adding {{form.title}} inside a form tag in my template, Here is what it looks like :
what I get vs. what I want
.

The styling seems to be overridden somewhere but I'm unable to determine where that comes from...

I got the screenshot of "what I want" using my lines of code with this tailwind-play tool

More informations that could be useful :

  • Locally on my computer, I installed django-browser-reload.
  • My tailwind.config.js file looks like this :
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../**/templates/**/*.html"],
  theme: {
    extend: {},
  },
  daisyui: {
    themes: ['light', 'dark'],
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
}

  • I did try to rerun npm run tailwind-watch, refresh the web page using cmd+shift+R and rerun 'python manage.py runserver` every time I made some changes to see if the styling would be applied correctly

  • I also try to use this pre-created django project (which is a nice initiative btw !) and edit the template, adding a form, and the same styling issue appear..

When looking for some similar issues (like this one) their styling problems seem to have their origin in the use of tailwind form plugin. But in my case I'm not using it..!

Any idea where this problem may come from ?

(I hope my explanations were clear enough as I don't have a developer background and my "most used" programming language is python so far)

Thank you in advance for your kind answers and your help 🙏

答案1

得分: 1

在进行了一些测试后,我意识到问题出在当运行Django时,与我的表单字段相关联的类属性(应该是Tailwind样式类)在运行npm tailwind-watch时构建的最终输出CSS文件中没有出现。

所以我猜想,由于这些特定的类属性是由Django动态渲染的,它们不会被Tailwind编译器“监视”,并且相关的样式不会保存在输出的CSS文件中。

无论如何,所有这些解释可能有点混乱,因为我对涉及的所有概念都不太熟悉,我只是说出我所理解的。如果有人对此有更好的理解并遇到了相同的问题,请通过回答/评论提供一些信息。✌️

最后,这是我用来使我的样式保存在Tailwind CSS输出中的技巧:

我在模板中直接添加了一个隐藏的<div>标签,具有与小部件元素相同的属性类。

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

我将编辑我的初始问题的标题,以使它更清晰,因为我的问题与DaisyUI实际上没有太多关系。

英文:

After making a few tests, I realized that the issue comes from the fact that when running Django, somehow the class attributes associated with my form fields (and supposed to be tailwind styling classes) don't end up in the final output css file built when running npm tailwind-watch..

So I guess that since those particular class attributes are rendered dynamically by Django -> they don't end up being "watched" by the tailwind compiler, and the associated style is not saved in the output css file.

Anyways, all of these explanations are maybe a bit confusing because I'm not confortable with all the concepts involved here and I'm saying what I believe I understood. If anyone has a better understanding, having faced the same issue, please contribute by answering/commenting with some informations. 🙏✌️

Finally, here is the trick I used to get my styling to be saved in the tailwind css output :

I added a hidden &lt;div&gt; tag with the same attributes classes in the widget elements directly in the template.

&lt;div class=&quot;hidden form-control input input-primary w-full max-w-xs&quot;&gt;&lt;/div&gt;

I will edit the title of my initial question to make it clearer since my problem has not really anything to do with DaisyUI

huangapple
  • 本文由 发表于 2023年7月20日 19:41:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76729480.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定