1

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

hadisql
  • 21
  • 6

1 Answers1

1

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 <div> tag with the same attributes classes in the widget elements directly in the template.

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

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

hadisql
  • 21
  • 6