-
-
Notifications
You must be signed in to change notification settings - Fork 544
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TailwindCSS class manager implementation #362
Conversation
- As requested, I uploaded the auxiliary lib project to the project's main. - Now, I hope you implement it in NiceGUI, so we can all enjoy a more practical way of styling.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have reviewed my files, and I hope that you will continue the work I have done.
Awesome, thanks @Diegiwg! I started to refactor the code (my preferred way of getting to know new code). Now I'm at the point where we should decide what the final API should look like. Currently it's like: Typography(ui.label('label 2')).text_color('text-orange-900').element.tooltip('label 2') Embracing the builder pattern we would certainly make ui.label('label 2').typography.text_color('text-orange-900').element.tooltip('label 2') In order not to spoil the element's namespace too much, we could nest it within a ui.label('label 2').tailwind.typography.text_color('text-orange-900').element.tooltip('label 2')
ui.label('label 2').tw.typography.text_color('text-orange-900').element.tooltip('label 2') Furthermore, I tend to having methods per section, e.g. ui.label('label 2').tailwind.typography(text_color='text-orange-900').element.tooltip('label 2') Another decision to make is what exactly we want to do with the "text-" prefix in this example. A possible rule might be to always remove the common prefix among all options for a certain property. For font-size this would be "text-", for background clip this is "bg-clip-" and so on. @rodja What do you think? |
Let's go:
|
I'm very excited for this change. thanks for your efforts. ui.label('label 2').typography(text_color='text-orange-900', font_size = "text-6xl").element.tooltip('label 2') reasons:
|
Thanks, @Diegiwg and @morningstarsabrina, for your feedback and ideas! We brainstormed different options once again:
One question is: How much value is in dividing properties into sections? If I'm looking for "flex grow", should I step into Once we are there, we could as well throw all possible values into a single And - at least in VSCode - the suggestion popup for multiple keyword arguments gets cluttered quickly for many parameters. An alphabetically sorted dropdown list for class methods seems to be a nicer alternative. So my personal tendency would be to use the Tailwind namespace, remove the sections, and use methods instead of keyword arguments. This would be proposal 5 in the list above. Oh, 5 and 6 could even be combined, so that |
After seeing all the options listed like this, I was tempted to choose option 5 as well. About the option of a string for .tailwind, it might be interesting, but it wouldn't be a priority. So I VOTE for option 5, with the tailwind namespace being responsible for all style methods. |
Ok, I experimented with option 5/6 and it feels quite nice. I am, however, not sure if auto-suggestions for the 17,000 lines of generated code are fast enough. Sometimes it takes awfully long, but it might just need some time for indexing. Here is a usage example: from nicegui import ui
from nicegui.tailwind import Tailwind
ui.label('Test 1').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-300')
title_style = Tailwind().font_size('2xl').font_weight('bold')
label2 = ui.label('Test 2')
label3 = ui.label('Test 3')
title_style.apply(label2)
title_style.apply(label3)
ui.run() |
It's very good, for me, we use this model. About the thousands of rows, I believe the IDES will be smart to index after the first contact. |
wow can't wait to try it. |
We want to merge this for the 1.1.11 release. As open ToDos we see
|
What about this solution? ui.typography('Test 1').font_size('2xl').font_weight('bold') instead of ui.label('Test 2').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-300') Typography suggests that we use styling for a text, maybe even pre defined styleguides. ui.typography(text="text", variant="h1") Typography as a major element makes more sense to me since it is very common among frameworks/design systems. Feel free to disagree :) |
Thanks for the suggestion, @ofenbach! We would rather not introduce a new UI element for this purpose, since it only solves a subset of Tailwind styling and there's no reason a |
I think this PR is basically ready to merge. Documentation and tests are done. The last thing I did was to split the 20,000 lines into separate files which improves the auto-completion performance quite a bit. And I removed the Literal type for calling |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is soooo cool :-)
As requested , I uploaded the auxiliary lib project to the project's main.
Now, I hope you implement it in NiceGUI, so we can all enjoy a more practical way of styling.