search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.47k stars 1.28k forks source link

bug: class name Checkbox-xs Checkbox-success not working #2764

Closed PunkFleet closed 8 months ago

PunkFleet commented 8 months ago

What version of daisyUI are you using?

v4.6.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

none

Describe your issue

I'm sure i notice this: https://github.com/saadeghi/daisyui/discussions/1949

and im not found class name 'checkbox-xs', 'checkbox-success' etc, in my output.css image

there is config files tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      "./templates/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("daisyui"),
  ],
  daisyui: {
      themes: false,
      darkTheme: "dark",
      base: true,
      styled: true,
      utils: true,
      themeRoot: "*",
  },
}

package.json:

{
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "autoprefixer": "^10.4.16",
    "daisyui": "^4.6.0",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "tailwind-watch": "tailwindcss -i templates/static/admin/css/main.css -o templates/static/admin/css/output.css --watch",
    "tailwind-build": "tailwindcss -i templates/static/admin/css/main.css -o templates/static/admin/css/output.css --minify"
  },
  "dependencies": {
    "chart.js": "^4.4.1",
    "leaflet": "^1.9.4"
  }
}
github-actions[bot] commented 8 months ago

Thank you @Birddle for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

saadeghi commented 8 months ago

Is "./templates/**/*.{html,js}" addressing the file that contains checkbox-xs and checkbox-success?

PunkFleet commented 8 months ago

Is "./templates/**/*.{html,js}" addressing the file that contains checkbox-xs and checkbox-success? Yes, there have all static files

image
saadeghi commented 8 months ago

If checkbox-xs and checkbox-success string exist in the files, Tailwind should generate the class names.
Make sure you're not using half string / half variable for class names (like checkbox-{{colorname}}) Make sure after changing the files, the Tailwind/PostCSS build step runs successfully.

If issue still exists, please provide a reproduction repo so I can run the code.

PunkFleet commented 8 months ago

If checkbox-xs and checkbox-success string exist in the files, Tailwind should generate the class names. Make sure you're not using half string / half variable for class names (like checkbox-{{colorname}}) Make sure after changing the files, the Tailwind/PostCSS build step runs successfully.

If issue still exists, please provide a reproduction repo so I can run the code.

Yes, im sure i using all string not variable class. I using django framework and i don't know how to copy that using stackBiltz. but i can copy all code in here: setting.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'public', 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATIC_URL = 'public/templates/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'public/templates/static'),
]
STATIC_ROOT = 'public/static'

admin.py

 def get_changelist_formset(self, request: Any, **kwargs: Any) -> Any:
        formset = super().get_changelist_formset(request, **kwargs)

        class CustomForm(forms.ModelForm):
            class Meta:
                model = self.model
                fields = '__all__'

            # Customize individual fields here
            def __init__(self, *args, **kwargs):
                super().__init__(*args, **kwargs)

                # Customize fields based on their types
                for field_name, field in self.fields.items():
                    if isinstance(field, forms.DateField):
                        field.widget = forms.TextInput(attrs={'type': 'date'})
                    elif isinstance(field, forms.BooleanField):
                        field.widget = forms.CheckboxInput({'class': 'checkbox checkbox-xs checkbox-success'})

            checkbox = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class': 'checkbox checkbox-xs'}))
            listed = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class': 'toggle toggle-xs toggle-success'}))

        class CustomFormSet(formset):
            form = CustomForm

        return CustomFormSet

package.json

{
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "autoprefixer": "^10.4.16",
    "daisyui": "^4.6.0",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "tailwind-watch": "tailwindcss -i templates/static/admin/css/main.css -o templates/static/admin/css/output.css --watch",
    "tailwind-build": "tailwindcss -i templates/static/admin/css/main.css -o templates/static/admin/css/output.css --minify"
  },
  "dependencies": {
    "chart.js": "^4.4.1",
    "leaflet": "^1.9.4"
  }
}

postcss.config.json

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')],
  }

tailwind.config.json

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      "./templates/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("daisyui"),
  ],
  daisyui: {
      themes: false,
      darkTheme: "dark",
      base: true,
      styled: true,
      utils: true,
      themeRoot: "*",
  },
}

main.css(btw, this file custom style can be found in output.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

base.html

{% block extrastyle %}
    <link rel="stylesheet" href="{% static "admin/css/output.css" %}">
    {% endblock %}

and if im correct, the checkbox style is tailwind forms default style:

image

image

PunkFleet commented 8 months ago

If checkbox-xs and checkbox-success string exist in the files, Tailwind should generate the class names. Make sure you're not using half string / half variable for class names (like checkbox-{{colorname}}) Make sure after changing the files, the Tailwind/PostCSS build step runs successfully.

If issue still exists, please provide a reproduction repo so I can run the code.

Please check https://daisyui.com/docs/install/ -> 'post css'

there output.css also have not class 'checkbox-xs' and 'checkbox-success'

saadeghi commented 8 months ago

Please check https://daisyui.com/docs/install/ -> 'post css'

there output.css also have not class 'checkbox-xs' and 'checkbox-success'

It shouldn't. When checkbox-xs or checkbox-success don't exist in the html file, the class shouldn't be in output.css
As soon as I add checkbox-xs checkbox-success to html file and run npm run dev it adds the class names to output.css

https://stackblitz.com/edit/daisyui-postcss-wke6ue/?file=public%2Findex.html

PunkFleet commented 8 months ago

Please check https://daisyui.com/docs/install/ -> 'post css' there output.css also have not class 'checkbox-xs' and 'checkbox-success'

It shouldn't. When checkbox-xs or checkbox-success don't exist in the html file, the class shouldn't be in output.css As soon as I add checkbox-xs checkbox-success to html file and run npm run dev it adds the class names to output.css

https://stackblitz.com/edit/daisyui-postcss-wke6ue/?file=public%2Findex.html

Ohhh, im understood.
Daisyui classes generation after html rendering, i can not using template tag insert class if i using framework(e.g. django temlate). Undetstood it. Thank you @saadeghi . i will find a way for resovle my problem, Thank you again.

saadeghi commented 8 months ago

The problem is you have the class names in your admin.py file
but in tailwind.config.js the content is addressing to "./templates/**/*.{html,js}"

I specifically asked:

Is "./templates/**/*.{html,js}" addressing the file that contains checkbox-xs and checkbox-success?

and you said yes.

But the class names were in a .py file. How can we expect tailwind to generate the class name when you only addressed html and js files?

content in tailwind.config.js should address to all the files that contain CSS class names.

saadeghi commented 8 months ago

Daisyui classes generation after html rendering

When you run the build script, Tailwind builds a CSS file based on the calss names it finds in files addressed in content in tailwind.config.js

PunkFleet commented 8 months ago

The problem is you have the class names in your admin.py file but in tailwind.config.js the content is addressing to "./templates/**/*.{html,js}"

I specifically asked:

Is "./templates/**/*.{html,js}" addressing the file that contains checkbox-xs and checkbox-success?

and you said yes.

But the class names were in a .py file. How can we expect tailwind to generate the class name when you only addressed html and js files?

content in tailwind.config.js should address to all the files that contain CSS class names.

my bad. I didn't understand what it really meant before. django template is very highly coupled. I can only choose to keep one of the features and styles. It's field styles are all rendered via backend variable names, and I chose to implement it that way and it working now:

<input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}
{% if widget.type == 'checkbox' %}class="toggle toggle-xs toggle-success"{% endif %}>
image
PunkFleet commented 8 months ago

Hi @saadeghi , I have the same problem with other widgets: if the class name is not entered ahead of time in the html file, it doesn't load in the output.css. I would like to know if there is a possible way for daisyUI to load all the classes into output.css, instead of generating them in output.css according to the ready-to-use method.

saadeghi commented 8 months ago

@Birddle this is not about daisyUI at all. It's how Tailwind works for any class name and it's actually a smart way to generate the smallest possible CSS file on demand.

Tailwind CSS config has a content config. In content array, you can address any file. Either source file like .php an .py or html files or assets like js files. It can be any file. Among those files, if Tailwind find a class name, it will add its style to the output file.

So, you have your class names in some file. Either if it's backend or frontend, address all those files in tailwind.config.js and it will work as expected.

Alternatively, you can use the daisyUI CDN file which includes all daisyUI class names, but of course you will have unused styles as well.
https://daisyui.com/docs/cdn/