This looks really good and I especially like that you also thought about "Third party plugins" and included that in the docs. Being able to integrate both fullcalendar and a wysiwyg editor easily is definitely a headstart and something that is a point of friction with most of these component libraries!
I can't use it yet, since the docs are still missing the part about using this with svelte, but good to know you are working on that.
Thank you for the feedback! I'm glad to hear that you found the inclusion of third-party plugins helpful. We understand that seamless integration is often a point of friction, so we've made it a priority to simplify that process.
That's the reason we have said "Easiest Tailwind CSS Components Library"
Those are nice questions and we asked the same ourselves twice before we started working on this http://flyonui.com/.
Preline is a great library with its beauty. It uses Tailwind CSS utility clasess may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.
Where DaisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. However many projects require interactive features that need JavaScript.
This is where FlyonUI shines.
FlyonUI builds on top of DaisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.
They don't explain if "dual license" means "and" or "or". I suspect "and", because otherwise, it wouldn't make sense since MIT is one of the less restrictive open source licenses.
If it's the case, neither Flyon nor Preline are open source.
The components seem to work well and look good, but regarding its use of colors, it seems to have the same issues as DaisyUI. Lots of components have very low contrast between the inner text and the background color.
Even in the front page, we can see a button with black test on top of dark grey background. Unfortunately, that's a blocker if you're building simple B2B admin panels and don't want to spend too much time tweaking your theme to make it accessible.
Bigger ecosystem for react. Svelte is easier to develop in rapidly.
I can make things much faster in Svelte, epsecially since Svelte is less complex than React. With AI code generators, I don't really even have to think, just tell it what I want.
I went to see the Select component which is something that I always do to see how component libraries tackle complexity, and was surprised (and a bit horrified) to see that components are configured by writing html inside json inside data attributes. This is going to be a pain to use: strings have to be escaped, no assistance from the editor whatsoever, all crammed inside an attribute...
Thanks for the appreciation.
Currently we will be considering the support capabilities with JS frameworks, may be in the future we may consider Radix UI (ala shadcn.
Yes, it is beautiful on the surface, but the HTML is horrendous. For example, the first component, the accordion, doesn't use summary/details tags. Though the others seem semantic enough so far.
I was never one of those "separation of concerns" religion types, but the HTML is near unreadable. I'd much prefer something like picocss with a few extra utility classes—what I'm using now. This looks much nicer looking but, not worth dragging down my DX into the mud.
I wish there were something this beautiful as "low class" :) or even using some custom HTML elements to eliminate boilerplate. Maybe can't happen with this because it is based on tailwind?
Edit: also would like to reiterate that the dark theme needs a bit more contrast.
Here are some key points addressing the need for another component library on top of DaisyUI, like FlyonUI:
Additional JavaScript Support:
DaisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. But many projects require interactive features that need JavaScript.
FlyonUI builds on top of DaisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.
Headless Architecture:
FlyonUI’s headless architecture allows developers to focus on functionality, providing greater flexibility when integrating components into any UI framework or design system.
Broader Component Set:
FlyonUI extends the component offering, with both UI elements and functional components that handle interactive behaviors like accordion, overlay, dropdowns, and carousels, etc.
Third-Party Component Support:
FlyonUI provides built-in support for popular third-party libraries like ApexCharts, FullCalendar, Flatpickr, and Toast, etc. This allows developers to extend their UIs with advanced features.
I have a Daisy UI project (Sveltekit), that also integrates svelte-shadcn, as Flyon Ui uses Daisy Ui, would I no longer need to add Daisy as an import? Do I have full access to the Daisy Ui toolset? Can they be run side by side? Looks fantastic btw, congrats on the launch
A huge thanks to our talented design team for their exceptional work and dedication! Their creativity and attention to detail have truly elevated the project
I was hoping to find a contender for DaisyUI, but some of these components require JS. I wish there were more Tailwind component libraries that required 0 JS.
Looks great, but for dark/Gourmet, the purple primary color and others like accent and success are too dark and don't contrast well for me. The purple fails WCAG contrast checks from a quick look.
Tried to put it into my svelte project. Build failed. Went onto github to report it. A reproduction url is required ... so not submitting a bug ... and looking for something else to use ...
beautiful work, This looks like an interesting project that aims to combine the power of utility classes with semantic components. I'm curious if FlyonUI is currently limited to Next.js, or if it can be used with other frontend frameworks like Nuxt.js as well?
I love the approach of shadcn and the fact that they use Radix primitives, which have a focus on accessibility. But I wish they would have a pure CSS option without tailwind style classes. It took me some time to translate the classes shadcn uses from tailwind to CSS (which sometimes require more research) and the variables for colors, sizes, etc. into the CSS-to-js system I use (which is stitches - yes, its deprecated, but still the best one I know).
Tailwind is nice for prototyping and simple projects, but often I find that it obscures things too much and when I need more control over the CSS it is too abstract and awkward to use.
In case anyone finds this who is also interested: I just stumbled upon an implementation of shadcn/ui components with css modules that looks pretty solid: https://github.com/qwalker8408/shadcn-css/tree/main
>Tailwind is nice for prototyping and simple projects
That's interesting because I find it quite the opposite, if all I'm doing is a quick prototype then the last thing I want to do is spend hours creating a ton of components with tailwind! I've often gotten extremely frustrated that it completely nukes basic browser styles when all I'm trying to see what it'd look like if I had some text, a form and maybe a picture on the page.
It was ShadCN which convinced me that there is a lot of utility in Tailwind TBH. Absolutely love the whole 'just copy the component to my repo' concept. Plate JS follows the same and uses the same components but is a WYSIWYG editor: https://platejs.org/
Excellent list but some apples and some oranges up there.
Shadcn looks quite nice, but I wish they mentioned that it is React only (as far as I can tell).
Some of the above support Vue and React.
Some of the above actually seem to be actual CSS libraries on top of Tailwind without any dependencies on Javascript frameworks which personally seems more sane.
For past few years I've been teaching introductory Web Dev course at a university and students do pretty well with HTML,CSS and vanilla Javascript.
They pick up on plain CSS libraries easily. They understand the need for Javascript frameworks.
However, when it comes to insanity that is complexity of Javascript based build systems, it is beyond my abilities to transfer that knowledge. It becomes just a magical bundle of commands lost in the sea of abstraction.
FlyonUI is designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.
Why should I use FlyonUI?
Using Tailwind CSS alone may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.
Apart from that Tailwind CSS or DaisyUI doesn’t provide any interactive headless JavaScript components like accordion, overlay, dropdowns, etc…
This is where FlyonUI shines.
FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.
It would be nice if shadcn became the standard and you could copy components from any tailwind component library.
Technically, this would mean that all these component libraries allow you to copy-paste their components, and additionally there would be a 'standard' in theme token naming.
I don't understand the fascination for tools like Tailwind (or bootstrap before that). Sure when your doing very basic things it sounds cool to be able to use just a simple class to get a cool style, but then when used in hanger you end up with a list of class like this
I really agree on that one. Being able to define SOME (and I insist on that point) style directly in HTML is super convenient and can be a huge time saver day by day. But I think Tailwind went too far by trying to entirely replace CSS with countless classes and shortcuts. Just imagine the learning curve and the time spent by devs trying to find the right syntax for a specific transition or such...
I like the approach of tools like Perseid (https://perseid.dev/docs/ui/styling/classes), focusing only on layout design and providing a small set of built-in CSS classes (alignments, positions, margins, dimensions, …) for that purpose. All the rest (colors, shadows, fonts, animations and such) lying in good old CSS declarations.
This is like a backend developer asking someone using a spreadsheet why don't they just build their own database. Or a sysadmin telling you why don't you just run your own Kubernetes cluster. Unless there's like a 10 person team working on the same thing, you gotta take shortcuts somewhere.
Not here to argue that learning CSS properly isn't better, but I legit have no interest in doing so. I can copy-paste that code and be sure it'll look exactly the same on my website. I can't do the same with CSS.
To be clear, you have to 'learn CSS properly' to make sense of Tailwind. I don't see how someone can not know CSS, but know Tailwind. Tailwind is just atomic classes for the underlying CSS styles.
> I don't see how someone can not know CSS, but know Tailwind.
I've met a fair amount of devs (specially younger, <30yo fullstack devs) who have not written raw CSS at all and just use Tailwind. They are employed and get paid decently well.
Tailwind is a massive time saver, and I can see the appeal.
I can honestly say that tailwind made me way better at CSS. Going through the docs to find classes I needed to do particular things and reading what they did had made me so much better at understanding what it does at a low level. I would still prefer not to write tailwind classes rather than struggle with naming bespoke classes and writing all the CSS but it's definitely made me a better and faster frontend developer
Writing vanilla CSS often involves the hassle of coming up with proper class names, which can become tedious. That's where Tailwind CSS shines, as it allows you to apply styles directly with utility classes. However, repeatedly using the same classes and writing many of them can become cumbersome. To simplify this, FlyonUI introduces semantic classes to streamline your work. For example, instead of writing multiple utility classes for a button, you can simply use `.btn`, and your button styling is ready to go.
I like splitting the classes into logical groups. In this case, I’m grouping by: 1) base positioning, 2) flex behavior, 3) effects, and 4) colors.
Finally, the filter in the tw function allows for easy conditional classes:
class={tw(kind === "something" && "m-4 p-4")}
I also use Biome, which has a work-in-progress but already quite good class sorter for Tailwind [1]. This keeps the code tidy by applying a logical sort order to each string passed into the tw function.
A lot of people find tailwind easier to use because it cuts out the steps in CSS where you have to come up with all those names for elements/containers/wrappers etc and define the styles for them all.
The big long lines of classes are often only written once anyway as web development usually makes use of components or partials for repeated elements.
Obviously others can continue to use CSS if they prefer to do it that way.
> not having to jump back and forth between index.html and styles.css
Nobody prevents you to have your style directly in the HTML files (or in the JSX components, AKA CSS-in-js). Even though with split screen and keyboard shortcuts to switch I fail to see how this is an argument …
> Why not just use Tailwind in your JSX components?
That just is out of place here: using tailwind means using inline style + having a CSS stylesheet (tailwind's stylesheet) at the same time. It's pure overhead.
This looks really good and I especially like that you also thought about "Third party plugins" and included that in the docs. Being able to integrate both fullcalendar and a wysiwyg editor easily is definitely a headstart and something that is a point of friction with most of these component libraries!
I can't use it yet, since the docs are still missing the part about using this with svelte, but good to know you are working on that.
Thank you for the feedback! I'm glad to hear that you found the inclusion of third-party plugins helpful. We understand that seamless integration is often a point of friction, so we've made it a priority to simplify that process.
That's the reason we have said "Easiest Tailwind CSS Components Library"
Does this work with tailwind visual editors like this https://windframe.dev ?
Isn't this just a thin wrapper of Preline? Why use this instead of Preline?
Hello fmnxl,
Those are nice questions and we asked the same ourselves twice before we started working on this http://flyonui.com/.
Preline is a great library with its beauty. It uses Tailwind CSS utility clasess may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.
Where DaisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. However many projects require interactive features that need JavaScript.
This is where FlyonUI shines.
FlyonUI builds on top of DaisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.
I'm worried about the license.
Flyon contains code from Preline which is "dual licensed" under the MIT license and a proprietary "fair" license.
> Preline UI is free for both personal and commercial projects, released under dual license terms "MIT" and "Preline UI Fair Use License".
See: https://preline.co/docs/license.html
They don't explain if "dual license" means "and" or "or". I suspect "and", because otherwise, it wouldn't make sense since MIT is one of the less restrictive open source licenses.
If it's the case, neither Flyon nor Preline are open source.
Hello Fermigier,
Thank you for sharing your input.
You’re correct that Preline has a dual license (MIT) allowing usage for both personal and commercial projects.
We've confirmed with Preline and they have implemented this license just to restrict those who utilize their code without proper attribution.
FlyonUI utilizes the Preline JS plugins to enhance the functionality of its semantic components.
As a result, it also adheres to the same licenses. For more details, please visit: https://flyonui.com/docs/getting-started/license/
The components seem to work well and look good, but regarding its use of colors, it seems to have the same issues as DaisyUI. Lots of components have very low contrast between the inner text and the background color.
Even in the front page, we can see a button with black test on top of dark grey background. Unfortunately, that's a blocker if you're building simple B2B admin panels and don't want to spend too much time tweaking your theme to make it accessible.
Looks great! Can you also consider supporting svelte[1] (and sveltekit[2]) officialy?
[1] https://svelte.dev
[2] https://kit.svelte.dev
Yes, if Daisy UI provides support to Svelte, we will surely go for it.
I'm tempted to try this in my SvelteKit app. What do I lose compared to a React user?
Bigger ecosystem for react. Svelte is easier to develop in rapidly.
I can make things much faster in Svelte, epsecially since Svelte is less complex than React. With AI code generators, I don't really even have to think, just tell it what I want.
Of note, my main career isn't programming.
I went to see the Select component which is something that I always do to see how component libraries tackle complexity, and was surprised (and a bit horrified) to see that components are configured by writing html inside json inside data attributes. This is going to be a pain to use: strings have to be escaped, no assistance from the editor whatsoever, all crammed inside an attribute...
I see none of this in any of the Select examples. Mind sharing what you mean?
Take a look at Advanced Select. I think that’s the one he was referring to.
Really love the styles. Very tasteful and subtle.
I understand you want it to be framework agnostic, but are you considering version of this for Radix UI (ala shadcn) / React Aria Components?
Hello Palmik,
Thanks for the appreciation. Currently we will be considering the support capabilities with JS frameworks, may be in the future we may consider Radix UI (ala shadcn.
I think India's border is wrong in their map component[1]
[1] https://flyonui.com/docs/third-party-plugins/datamaps/
We've used an open-source library called datamaps https://datamaps.github.io/ which plots India as you're seeing on FlyonUI.
Which indeed needs to be correct.
this looks nice but at first glance of an example, this code is soooooo gross.
https://flyonui.com/docs/advanced-forms/advanced-select/#def...i ain't doing that. nope. just give me tailwind classes in regular html so i can copy/paste.
Yes, it is beautiful on the surface, but the HTML is horrendous. For example, the first component, the accordion, doesn't use summary/details tags. Though the others seem semantic enough so far.
I was never one of those "separation of concerns" religion types, but the HTML is near unreadable. I'd much prefer something like picocss with a few extra utility classes—what I'm using now. This looks much nicer looking but, not worth dragging down my DX into the mud.
I wish there were something this beautiful as "low class" :) or even using some custom HTML elements to eliminate boilerplate. Maybe can't happen with this because it is based on tailwind?
Edit: also would like to reiterate that the dark theme needs a bit more contrast.
Used https://daisyui.com/ which is also pretty good (and similar).
Hello rockyj,
Here are some key points addressing the need for another component library on top of DaisyUI, like FlyonUI:
Additional JavaScript Support: DaisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. But many projects require interactive features that need JavaScript. FlyonUI builds on top of DaisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.
Headless Architecture: FlyonUI’s headless architecture allows developers to focus on functionality, providing greater flexibility when integrating components into any UI framework or design system.
Broader Component Set: FlyonUI extends the component offering, with both UI elements and functional components that handle interactive behaviors like accordion, overlay, dropdowns, and carousels, etc.
Third-Party Component Support: FlyonUI provides built-in support for popular third-party libraries like ApexCharts, FullCalendar, Flatpickr, and Toast, etc. This allows developers to extend their UIs with advanced features.
For more details refer: https://flyonui.com/docs/getting-started/introduction/
I really dislike daisy's default colors and changing them is a PITA
Maybe it's just me but these "modern" UI kits such as Daisy and Skeleton have horrible UI color schemes, themse and aesthetics.
Large amount of praise from low karma accounts.
Pretty sus in this thread
I have a Daisy UI project (Sveltekit), that also integrates svelte-shadcn, as Flyon Ui uses Daisy Ui, would I no longer need to add Daisy as an import? Do I have full access to the Daisy Ui toolset? Can they be run side by side? Looks fantastic btw, congrats on the launch
The two interactive clusters of component examples on the homepage are really amazing and well thought out.
How'd you come up with the idea of having them cascade down from the right side of the webpage above the fold? Never seen that before.
The docs have some serious attention to detail.
A huge thanks to our talented design team for their exceptional work and dedication! Their creativity and attention to detail have truly elevated the project
I was hoping to find a contender for DaisyUI, but some of these components require JS. I wish there were more Tailwind component libraries that required 0 JS.
Looks great, but for dark/Gourmet, the purple primary color and others like accent and success are too dark and don't contrast well for me. The purple fails WCAG contrast checks from a quick look.
Thanks for the appreciation & suggestion. We will look into it.
Tried to put it into my svelte project. Build failed. Went onto github to report it. A reproduction url is required ... so not submitting a bug ... and looking for something else to use ...
Hello kewp,
We appreciate your feedback.
Honestly, we've just shipped our first release and we will be creating guides for the framework integration soon.
https://flyonui.com/docs/getting-started/framework-guides/
However, you can mention localhost in the URL if you're trying on the local machine or you can share stackblitz URL with setup which you have tried.
To OP:
In "Stripped tables" I think you mean "Striped", if you're talking about stripes rather than about removing the covering.
Looks great. I've just been using TailwindUI (commercial) and creating components as I see fit. I base it off the HTML templates only.
Thanks for the appreciation.
beautiful work, This looks like an interesting project that aims to combine the power of utility classes with semantic components. I'm curious if FlyonUI is currently limited to Next.js, or if it can be used with other frontend frameworks like Nuxt.js as well?
Looks great and quite complete
Thanks for the appreciation.
beautiful work, can't imagine the hours that went into it
8 months actually...!! But worth it. The appreciation and love it is getting already, the efforts are paid off.
Thanks a lot for your appreciation.
Excellent effort and thanks in advance for publishing this.
You are welcome. Thanks for the appreciation.
The landscape is very crowded. For example, I've tried all of these:
- https://ui.shadcn.com/ *
- https://daisyui.com/
- https://www.ripple-ui.com/
- https://flowbite.com/
- https://tailblocks.cc/
- https://headlessui.com/
* Finally settled on this one because I can edit the components easily if needed. It's basically a code generator not a component library.
I'm already set on shadcn, but still have to ask what this one does better/different?
I love the approach of shadcn and the fact that they use Radix primitives, which have a focus on accessibility. But I wish they would have a pure CSS option without tailwind style classes. It took me some time to translate the classes shadcn uses from tailwind to CSS (which sometimes require more research) and the variables for colors, sizes, etc. into the CSS-to-js system I use (which is stitches - yes, its deprecated, but still the best one I know).
Tailwind is nice for prototyping and simple projects, but often I find that it obscures things too much and when I need more control over the CSS it is too abstract and awkward to use.
In case anyone finds this who is also interested: I just stumbled upon an implementation of shadcn/ui components with css modules that looks pretty solid: https://github.com/qwalker8408/shadcn-css/tree/main
Hopefully something like this will be made official - at least there is some discussion going on in the shadcn/ui repo: https://github.com/shadcn-ui/ui/discussions/2832
>Tailwind is nice for prototyping and simple projects
That's interesting because I find it quite the opposite, if all I'm doing is a quick prototype then the last thing I want to do is spend hours creating a ton of components with tailwind! I've often gotten extremely frustrated that it completely nukes basic browser styles when all I'm trying to see what it'd look like if I had some text, a form and maybe a picture on the page.
It was ShadCN which convinced me that there is a lot of utility in Tailwind TBH. Absolutely love the whole 'just copy the component to my repo' concept. Plate JS follows the same and uses the same components but is a WYSIWYG editor: https://platejs.org/
Excellent list but some apples and some oranges up there.
Shadcn looks quite nice, but I wish they mentioned that it is React only (as far as I can tell).
Some of the above support Vue and React.
Some of the above actually seem to be actual CSS libraries on top of Tailwind without any dependencies on Javascript frameworks which personally seems more sane.
For past few years I've been teaching introductory Web Dev course at a university and students do pretty well with HTML,CSS and vanilla Javascript.
They pick up on plain CSS libraries easily. They understand the need for Javascript frameworks.
However, when it comes to insanity that is complexity of Javascript based build systems, it is beyond my abilities to transfer that knowledge. It becomes just a magical bundle of commands lost in the sea of abstraction.
> Shadcn looks quite nice, but I wish they mentioned that it is React only (as far as I can tell).
https://www.shadcn-svelte.com
https://www.shadcn-vue.com
https://github.com/birobirobiro/awesome-shadcn-ui
Hello welder,
Thanks for sharing your thoughts.
Obviously, shadcn is the best library.
FlyonUI is designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.
Why should I use FlyonUI? Using Tailwind CSS alone may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.
Apart from that Tailwind CSS or DaisyUI doesn’t provide any interactive headless JavaScript components like accordion, overlay, dropdowns, etc…
This is where FlyonUI shines.
FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.
It would be nice if shadcn became the standard and you could copy components from any tailwind component library.
Technically, this would mean that all these component libraries allow you to copy-paste their components, and additionally there would be a 'standard' in theme token naming.
It could also be nice if it were pure HTML instead of React.
Many of the components in shadcn are implemented with radix components which have the js functionality.
I too have been wanting html versions of some simple non functional ones for use in Django.
Daisy UI is great because it just makes custom classes using tailwind @apply so you can use them in react or server side html.
These components are interactive, but you can copy them to HTML by inspecting them via your browser.
For the AlpineJS / Livewire fans:
- https://wireui.dev
- https://fluxui.dev
- https://www.penguinui.com
In Shadcn you will have to style the components manually while Flyon UI provides styled-components. You will get Semantic classes as well.
Today I learned about shadcn, thanks.
I don't understand the fascination for tools like Tailwind (or bootstrap before that). Sure when your doing very basic things it sounds cool to be able to use just a simple class to get a cool style, but then when used in hanger you end up with a list of class like this
and then I really don't understand what you've gained compared to using CSS directly…[1]: this class is taken from a flowbite component I've worked with no latter than yesterday. https://flowbite.com/docs/components/toast/#simple-toast
I really agree on that one. Being able to define SOME (and I insist on that point) style directly in HTML is super convenient and can be a huge time saver day by day. But I think Tailwind went too far by trying to entirely replace CSS with countless classes and shortcuts. Just imagine the learning curve and the time spent by devs trying to find the right syntax for a specific transition or such...
I like the approach of tools like Perseid (https://perseid.dev/docs/ui/styling/classes), focusing only on layout design and providing a small set of built-in CSS classes (alignments, positions, margins, dimensions, …) for that purpose. All the rest (colors, shadows, fonts, animations and such) lying in good old CSS declarations.
This is like a backend developer asking someone using a spreadsheet why don't they just build their own database. Or a sysadmin telling you why don't you just run your own Kubernetes cluster. Unless there's like a 10 person team working on the same thing, you gotta take shortcuts somewhere.
Not here to argue that learning CSS properly isn't better, but I legit have no interest in doing so. I can copy-paste that code and be sure it'll look exactly the same on my website. I can't do the same with CSS.
To be clear, you have to 'learn CSS properly' to make sense of Tailwind. I don't see how someone can not know CSS, but know Tailwind. Tailwind is just atomic classes for the underlying CSS styles.
> I don't see how someone can not know CSS, but know Tailwind.
I've met a fair amount of devs (specially younger, <30yo fullstack devs) who have not written raw CSS at all and just use Tailwind. They are employed and get paid decently well.
Tailwind is a massive time saver, and I can see the appeal.
I can honestly say that tailwind made me way better at CSS. Going through the docs to find classes I needed to do particular things and reading what they did had made me so much better at understanding what it does at a low level. I would still prefer not to write tailwind classes rather than struggle with naming bespoke classes and writing all the CSS but it's definitely made me a better and faster frontend developer
Writing vanilla CSS often involves the hassle of coming up with proper class names, which can become tedious. That's where Tailwind CSS shines, as it allows you to apply styles directly with utility classes. However, repeatedly using the same classes and writing many of them can become cumbersome. To simplify this, FlyonUI introduces semantic classes to streamline your work. For example, instead of writing multiple utility classes for a button, you can simply use `.btn`, and your button styling is ready to go.
I had my doubts, but Tailwind's mantra "looks horrible, but you need to try it!" turned out to be true for me.
You can think of Tailwind as the "APL of CSS." A single utility class can generate a lot of CSS for you, which is one advantage.
The key benefit of Tailwind is that it co-locates your CSS with your HTML, reducing cascading issues and improving maintainability.
Like any codebase, you can use your tools to add more structure and meaning.
For example, I like using a tw function like this:
Using the tw function, your example classes would look something like this: I like splitting the classes into logical groups. In this case, I’m grouping by: 1) base positioning, 2) flex behavior, 3) effects, and 4) colors.Finally, the filter in the tw function allows for easy conditional classes:
I also use Biome, which has a work-in-progress but already quite good class sorter for Tailwind [1]. This keeps the code tidy by applying a logical sort order to each string passed into the tw function.--
1: https://github.com/biomejs/biome/pull/1362
Hello littlestymaar,
Thanks for sharing your thoughts.
To deal with the huge number of class lists like this
`fixed flex items-center w-full max-w-xs p-4 space-x-4 text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow top-5 right-5 dark:text-gray-400 dark:divide-gray-700 dark:bg-gray-800"` [1]
We've created Flyon UI, to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.
With FlyonUI you can achieve this with semantic classes like:
btn btn-primary
for more details: https://flyonui.com/docs/third-party-plugins/notyf/
> With FlyonUI you can achieve this with semantic classes like:
> btn btn-primary
That's obviously the better way, but then it's not Tailwind anymore. You're just using class and CSS directly.
It's more ergonomic than using stylesheets.
- No external stylesheets. No need to think about optimising the serving of CSS assets (e.g. with CDN)
- Co-locality: work on styling right where the element is, you don't have to figure out which stylesheet affects a particular element.
- No naming headache, as there's no need to give class names to elements in order to style a particular (or set of) elements
These days HTML is served compressed, with gzip/brotli, so long class attributes won't bloat the resulting file size by much.
Stylesheets still has its place of course.
A lot of people find tailwind easier to use because it cuts out the steps in CSS where you have to come up with all those names for elements/containers/wrappers etc and define the styles for them all.
The big long lines of classes are often only written once anyway as web development usually makes use of components or partials for repeated elements.
Obviously others can continue to use CSS if they prefer to do it that way.
you've gained:
- fine-grained design tokens (p-63 doesn't exist)
- freedom from having to name things prematurely
- not having to jump back and forth between index.html and styles.css
> freedom from having to name things prematurely
> not having to jump back and forth between index.html and styles.css
Nobody prevents you to have your style directly in the HTML files (or in the JSX components, AKA CSS-in-js). Even though with split screen and keyboard shortcuts to switch I fail to see how this is an argument …
> Nobody prevents you to have your style directly in the HTML files (or in the JSX components, AKA CSS-in-js).
Why not just use Tailwind in your JSX components?
> Why not just use Tailwind in your JSX components?
That just is out of place here: using tailwind means using inline style + having a CSS stylesheet (tailwind's stylesheet) at the same time. It's pure overhead.
I don't know, feels more natural to me. Tailwind was a godsend.
Looks really cool..!!
Thanks for the appreciation.