Comments (13)
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
from daisyui.
@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/
from daisyui.
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
from daisyui.
The problem is you have the class names in your
admin.py
file but intailwind.config.js
thecontent
is addressing to"./templates/**/*.{html,js}"
I specifically asked:
Is
"./templates/**/*.{html,js}"
addressing the file that containscheckbox-xs
andcheckbox-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
intailwind.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](https://private-user-images.githubusercontent.com/86408260/297627303-a2b39a36-4393-424c-af1b-ca50cb8e6b85.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwMjYzMTEsIm5iZiI6MTcxODAyNjAxMSwicGF0aCI6Ii84NjQwODI2MC8yOTc2MjczMDMtYTJiMzlhMzYtNDM5My00MjRjLWFmMWItY2E1MGNiOGU2Yjg1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEwVDEzMjY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZjZTFlZDZiNWFiNGQzNGQwM2E2MTA5YjE5YzJhNGE4NWQ2OTBjMzIxNTAwYzY4YmFmZWM3MzkzNjI5MmExMTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5t_AJ0D-uF1YH76hZu9MG4frGt2347j1586G8JCXNEw)
from daisyui.
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.
from daisyui.
Is "./templates/**/*.{html,js}"
addressing the file that contains checkbox-xs
and checkbox-success
?
from daisyui.
Is
"./templates/**/*.{html,js}"
addressing the file that containscheckbox-xs
andcheckbox-success
?
Yes, there have all static files
![image](https://private-user-images.githubusercontent.com/86408260/297042675-a3a7bfd6-5169-4321-8ec5-7f12538c79f6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwMjYzMTEsIm5iZiI6MTcxODAyNjAxMSwicGF0aCI6Ii84NjQwODI2MC8yOTcwNDI2NzUtYTNhN2JmZDYtNTE2OS00MzIxLThlYzUtN2YxMjUzOGM3OWY2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEwVDEzMjY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUxYTRhNzQxYWM5MWI3NjEzMzY1ZDFiZjU0NDFkNzk2M2EzZGE3YWQyYjg1NGYzNjY5MTdlODBlZGQ1ZGI2MTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ck0q5-PinGKCZCiyOLYWECDjcu32gDiQKzjgdiVf4wY)
from daisyui.
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.
from daisyui.
If
checkbox-xs
andcheckbox-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 (likecheckbox-{{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:
from daisyui.
If
checkbox-xs
andcheckbox-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 (likecheckbox-{{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'
from daisyui.
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
orcheckbox-success
don't exist in the html file, the class shouldn't be inoutput.css
As soon as I addcheckbox-xs checkbox-success
to html file and runnpm run dev
it adds the class names tooutput.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.
from daisyui.
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 containscheckbox-xs
andcheckbox-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.
from daisyui.
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.
from daisyui.
Related Issues (20)
- docs: provide example how to use with Aria Kit HOT 2
- bug: HOT 6
- bug: disabled checkbox border overflow HOT 1
- bug: always disabled button when disabled attribute is present HOT 2
- docs: Hero with overlay image HOT 1
- bug: showModal using onKeyDown Enter not working HOT 2
- docs: Modal styling and animation missing HOT 3
- bug: tabs boxed with radio forces unrounded bottom corners HOT 1
- The space between children of `.join` is incorrect after changing the default button border width HOT 1
- bug: DaisyUI hangs Docker builds for 64 bit platforms HOT 6
- bug: Incorrect type declaration files for Node16/NodeNext module resolution HOT 1
- bug: prettier plugin for tailwind write credits and sometime tailwind lsp stopped on vim HOT 3
- bug: Modal Dialog Adds A None Existent Scrollbar Spacing To Backdrop HOT 6
- docs: search weirdness HOT 2
- docs: Highlight that the first theme becomes the default HOT 2
- bug: Lagging on the opening animation of collapse components only on Firefox HOT 1
- bug: [WARNING] Unexpected "*" when building. HOT 5
- bug: Black theme borders not rounded HOT 2
- bug: stepper (active step) z-index is higher then of the drawer HOT 1
- bug: White area overlays part of the drawer's content HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from daisyui.