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.
Thanks a lot for your appreciation.
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.
`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]
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
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.
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.
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 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:
export const tw = (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(" ");
Using the tw function, your example classes would look something like this: class={tw(
"fixed top-5 right-5 w-full max-w-xs p-4",
"flex items-center space-x-4 divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-gray-700",
"rounded-lg shadow",
"bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400"
)}
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.--
- 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.
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.
- 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
> 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.
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/
> btn btn-primary
That's obviously the better way, but then it's not Tailwind anymore. You're just using class and CSS directly.
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.
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/
* 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?
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 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.
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.
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.
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
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.
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.
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.
That's the reason we have said "Easiest Tailwind CSS Components Library"
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.
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.
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/
Which indeed needs to be correct.
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
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.
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.
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.
In "Stripped tables" I think you mean "Striped", if you're talking about stripes rather than about removing the covering.
I understand you want it to be framework agnostic, but are you considering version of this for Radix UI (ala shadcn) / React Aria Components?
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.