15 ms·

DaisyUI – Tailwind CSS Components

474 points by jonifico 5y ago

sandGorgon 5y ago
this is so good! I wish the author would also put up a purchase page on https://themeforest.net/ https://themeforest.net/ . I dont mind optionally paying for it - especially a nicely packaged starter for nextjs, etc
irrational 5y ago
Anyone with experience using Tailwind UI want to comment on how this compares?
- Brajeshwar 5y ago
  Here is my quick observation on a cursory glance. DaisyUI is beautifully written. This can be the kit with a boatload of work done for you. Think like Bootstrap but better with Tailwind. You can use this to teach how to write well thought-out CSS codes, separation, and extensibility. TailwindUI is more like Bourbon[1] (was my go-to Sass tool) but on the structural interfaces done for you. I'm standardizing out Web, WebApps, and marketing materials to start with TailwindUI. Someone with good chop of CSS/Tailwind won't likely need to use TailwinUI but it can be a fast tool for teams. It is highly extensible but also has the double-edge sword criteria that a rookie can just keep copy-pasting, repeating codes and still work (not a good thing). Will we use DaisyUI for the team? Unlikely! Will I use it for some quick but still larger project, marketing page? I might very likely. 1. https://www.bourbon.io https://www.bourbon.io
- nkmnz 5y ago
  Using tailwindUI a lot. This doesn’t come close in terms of visual quality.
- ing33k 5y ago
  I recently used Tailwind UI to build https://zcashblockexplorer.com https://zcashblockexplorer.com Tailwind UI is great! ( please note that I a primarily a backend dev with limited knowledge of CSS ) Looking forward to explore DaisyUI soon !
deleted 5y ago
[deleted]
whoisjuan 5y ago
I’m not saying this is ugly but the visual execution of some of these components is poor. No good usage of padding in some examples, poor ratios between the typography and the containers, inconsistent use of different line widths and border radius, weird and incosistent design choices in spacing and proportions… I mean. This looks alright and it will certainly make any UI look pretty decent, but the execution is not superb like the actual TailwindUI library which is incredibly well thought from a visual design perspective. Those components are perhaps less shiny than these but they are incredibly functional and way more intentional. This is a good effort though and I hope to see it improving.
- joexuyi 5y ago
  Agreed. Not to sound too critical, but it looks off.
- AngeloAnolin 5y ago
  I think it is not a fair comparison with the Tailwind UI where there's probably more than one person doing the work plus the whole expertise of the actual Tailwind authors in the mix. If you are able to observe what is severely lacking in this implementation, I am pretty sure that the Github author would welcome your suggestions / comments / PRs and any contribution to make this better. For a start, this is actually good (enough). In the same vein that TailwindUI is still continuing to evolve as the maintainers are finding optimization to make it better.
  - whoisjuan 5y ago
    Totally agree and I mean it with no animosity. As an adopter of Tailwind, I really want to see more of these components kits and for the exisiting ones to keep improving.
- thomasfl 5y ago
  A few pull requests could fix most of what you mentioned, if the maintainer approved it.
- onion2k 5y ago
hashedout 5y ago
This is a very nice step in making Tailwind more Bootstrap like (read beginner friendly). One common complaint about Tailwind is that it makes the HTML look very full (full of classes). A very good example on OP's website for a button: Using tailwind: <a class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600">Button</a> Using daisy: <a class="btn btn-primary">Button</a> Although I personally think that the corners at a bit too rounded by default, giving it a very amateur look but I think you can customize that. But a very promising project indeed.
- joexuyi 5y ago
  so why not just use bootstrap? I'm new to web development, but I thought the whole point of TailwindCSS is that it is more customisable than Bootstrap.
  - hashedout 5y ago
    What if you as a beginner can start using Tailwind immediately with this library and can learn tailwind's utility classes at your own pace when you need to customize anything? I'm not sure about this path, but it might be good for a beginner.
    - thecryptodiver 5y ago
      Yeah, this seems more like the combo of ease of Bootstrap + the extendability of Tailwind.
  - volkandkaya 5y ago
    It is hard to breakout of Bootstrap defaults. Both libraries have pros and cons.
- supermatt 5y ago
  Thats exactly what this component library does: https://daisyui.com/components/button https://daisyui.com/components/button If you want to do in "raw" tailwind (i.e. without this component library), you can use layers to create your own component classes, e.g.: @layer components { .btn { @apply inline-block px-4 py-3 text-sm font-semibold text-center uppercase transition duration-200 ease-in-out rounded-md cursor-pointer; } .btn-primary { @apply text-white bg-indigo-500 hover:bg-indigo-600; } }
Brajeshwar 5y ago
For those wishing to learn the intricacies and beauty of Tailwind, this is a good source. Well written code but might lack the finesse of design. Then use TailwindUI[1] as a kit for your design/frontend team. 1. https://tailwindui.com https://tailwindui.com
soheil 5y ago
Oh I pray that I remember this website next time I'm looking for an HTML/css template. Great job, this UI looks so polished and is as modern as it gets.
- Brajeshwar 5y ago
  A much simpler Bootstrapped powered one popped up on Hackernews recently, https://frontendor.com https://frontendor.com
hardwaresofton 5y ago
In this space also: https://blocks.wickedtemplates.com https://blocks.wickedtemplates.com (NOTE: I did not WickedBlocks/WickedTemplates -- it's the awesome work of the folks over at WickedTemplates https://wickedtemplates.com https://wickedtemplates.com, which they shared on HN I believe a while back) I'm actually working on a little side project right now where I turn wickedblocks into a set of usable native web components (as in drop an <import> tag and the component on your page and you're off to the races), because I think that's a much more composable way to use these snippets copy & pasting HTML, looks like Daisy needs to be next. [EDIT] A bit annoying to others probably to drop a lede and I have no idea when I'll get done and publish it with the blog post so if someone just wants to see the code: https://gitlab.com/mrman/landing-gear https://gitlab.com/mrman/landing-gear If anyone wants to contribute a snazzy icon I'd love to take it! There's no landing page to showcase it yet but there's files like lg-left-header/index.html[0] which showcase usage and the intended simplicity. Obviously if you're trying to get started, use the blocks as they're presented and the awesome work done by WickedTemplates (they've also got some ready-to-go straight out of the box templates and other stuff for you to use on their main site!), but if you're interested in lit[1]-powered drop-in components, follow that space. [EDIT2] - For those taking a look at the code, note that there are like... 4 variants of the left-header component. Half of the time spent getting this out (it's all simple in theory -- just copy + paste and swap out static text for variables) was figuring out which parts to unify and which parts to keep separate for easy drop-in use. There's not much there yet, but it's more a matter of me finding time to sit down and make these decisions for every kind of component on the wickedblocks page. There are some concerns like i18n that I've punted on by just making sure that all static text were component inputs, but ideally integration with browser-supported i18n[2] is the proper way to do things in a minimal but standards compliant way. [EDIT3] - Added note to make it clear I didn't create WickedBlocks/WickedTemplates [0]: https://gitlab.com/mrman/landing-gear/-/blob/main/lg-left-header/index.html https://gitlab.com/mrman/landing-gear/-/blob/main/lg-left-he... [1]: https://lit.dev/ https://lit.dev/ [2]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...
- Mike_Andreuzza 5y ago
  Nice one.
vachi 5y ago
My team and I also made a similar library, more so for dashboards. https://github.com/mutable/meiosis https://github.com/mutable/meiosis
tpetry 5y ago
I am more impressed by the landing page than the actual components. Is anyone aware of a good component library for landing/marketing pages for Tailwind? There are toolkits like https://frontendor.com https://frontendor.com but they all follow the 5-10 year old "theme" of insanely packed content you had seen on SaaS pages some years ago. Together with many photographs or flat humans... I can't find anything with "new" approach which uses more padding, much more detail to typography, bigger fonts etc. shown very good on the https://tailwindcss.com https://tailwindcss.com landing page. Or any hint where all the new startups get their designers for these new fresh layouts?
- BigJono 5y ago
  I must be getting old because I literally don't get front end devs these days... The landing page is like a few divs with some position centres. What would you even use a "component library" for in this case? The only thing on the entire page with any complexity whatsoever are the component demos (which are obviously part of this DaisyUI thing itself) and the code blocks/syntax highlighting, which I'm sure there's a billion libraries for already. I'm really struggling to come up with any sort of other dependency that would help me build that page any faster than just opening the text editor and shitting out some HTML and CSS. Do people just spend so much time working with Bootstrap and whatever other cruft that they just never bother to learn the basics? At this level of simplicity and for churning out marketing pages where you don't care about maintainability, you're probably better off looking for a WYSIWYG editor rather than a library.
  - da39a3ee 5y ago
    You must indeed be getting very old. The purpose of the library is not to implement its own landing page.
- Pluiesurlavitre 5y ago
  Did you check https://tailwindui.com/ https://tailwindui.com/ ?
- bennyp101 5y ago
  There is an awesome[1] site for tailwind that has lots of places that could give you ideas. Or you could buy the Tailwind UI[2] - they add lots fairly often. [1] https://github.com/aniftyco/awesome-tailwindcss https://github.com/aniftyco/awesome-tailwindcss [2] https://www.tailwindui.com https://www.tailwindui.com
catmanjan 5y ago
I've heard a lot about how great tailwind is, can anyone point to some good examples of people using it? Most of what I can find is just samples
- leodriesch 5y ago
  https://github.com/vercel/commerce https://github.com/vercel/commerce
timwis 5y ago
Interesting side effects of css utility frameworks: I was trying to scrape a website that uses tailwind this week and it’s really difficult, as nothing had a unique class name.
- gear54rus 5y ago
  It is also an effect of various css-in-js shit, you can't know what the element does if it doesn't have a tooltip. Because now the class name is gibberish.
- jokethrowaway 5y ago
  That's not very nice, maintainability suffers in the same way. You can obfuscate your classes later on. But alas, the battle for semantic css has already been lost and the community keep going in the opposite way (first bootstrap, which was halfway through, now tailwind which is basically inline styles with variables).
runawaybottle 5y ago
My goodness Bootstrap, how far ahead of your time you were. To this day we copy you, god bless you m’lord. Nope, I reject this. We should be so much farther ahead than this. It’s the garbage fullstack developers that need this crap to make a good ui. They don’t belong on the frontend, and I’m pretty tired of it. Our UI/UX will get shittier and shittier if we coddle this group.
- deleted 5y ago
  [deleted]
- aniforprez 5y ago
  This is probably one of the saltiest comments I've read here
volkandkaya 5y ago
DaisyUI is a great starting point but it is missing a lot to make it functional and then you end up recreating the wheel. I agree with some comments that it is lacking that wow factor that TailwindUI has. I'm working on https://versoly.com/ https://versoly.com/ which is a Tailwind Website builder and have ran into a bunch of issues with Tailwind when it comes to building static sites. I love that Bootstrap offer "btn btn-primary" and it makes it very easy to keep a consistent site. For Tailwind to take off it needs - A list of components (maybe 20 ish, buttons, tabs, navbars being the main ones) - JS for components - Container system (I have built one that works similar to Bootstrap and makes it much easier to create responsive layouts quickly) Once those core parts have been built I believe developers will create more advanced libraries such as lightboxes etc which will save even more time. I'm a big fan of the new https://github.com/vuejs/petite-vue https://github.com/vuejs/petite-vue which is only 5kb and comes with a lot of power. Also combining it with something like https://github.com/CaptainCodeman/x-transition https://github.com/CaptainCodeman/x-transition would be interesting. I really want to see Tailwind grow so if you're interested in opensource or want to create paid UI kits feel free dm as I have a ton of ideas.
- kristiandupont 5y ago
  >For Tailwind to take off it needs You have a lot higher standards than I about what "taking off" means :-D
  - volkandkaya 5y ago
    It is doing amazing. But I talk with a lot of full stack and backend developers who still use Bootstrap. They even own TailwindUI and other templates but stick to Bootstrap. That to me means there is a big issue with Tailwind and the developer experience. Once solved Tailwind will grow even faster and help more developers/companies.
FrontAid 5y ago
That page broke tabbing through interactive elements by using nested focussable elements like this: <div tabindex="0"><input ...></div> Because of that, it is sometimes necessary to tab twice to focus the next element. Not sure whether that is a problem of DaisyUI in general or just their website. But it is definitely annoying.
Aeolun 5y ago
I tried using Tailwind, but I just couldn’t get into it. It’s like having to learn CSS all over again because the classnames do not map 1-1 with their respective properties, and autocomplete is lacking. Conversely, Chakra UI Box, which does more or less the same thing is super easy to get into. This looks nice, but I kind of feel like we’ve come full circle two full times to get to this point.
- bennyp101 5y ago
  I'm not sure why you would want them to map 1-1? Might as well just write inline styles surely? For autocomplete, have you seen https://tailwindcss.com/docs/editor-support https://tailwindcss.com/docs/editor-support ? I use it in PHPStorm and VSCode and I get class name autocompletion just fine.
  - mhitza 5y ago
    Autocompletion works for now, but won't work in the future when JIT mode is default (unless they figure out some trickery). As a JIT mode user, the 1-1 naming would really be useful now.
eric4smith 5y ago
Very welcome. Sometimes the amount of classes needed in Tailwind is enormous. I paid for the TailwindUI pack too. But as nice as Tailwind is, the guys who built TailwindUI don't really get or understand a lot of real-world design patterns. A lot of stuff in there is needlessly complicated. Our team end up trimming down things to 50% of the markup that they use, while retaining full responsiveness. Overuse of flex for simple paradigms is a constant complaint of mine. Hope DaisyUI improves Tailwind in some way. Anyway... sorry to get sidetracked on a sidebar.. lol.
- Mike_Andreuzza 5y ago
  >>>Our team end up trimming down things to 50% of the markup that they use, while retaining full responsiveness. I have to agree with this.
- nickjj 5y ago
  There's also https://tailkit.com/ https://tailkit.com/, the markup is pretty reasonable. It was designed by someone who has been making themes for ~10 years. I did a review of Tailkit in general here: https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwind-components-and-giving-away-2-copies https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwin...
- tailspin2019 5y ago
  > the guys who built TailwindUI don't really get or understand a lot of real-world design patterns It's all relative. It's clear they understand more than I do, and I'm not a terrible UI designer, so paying for TailwindUI has been a no-brainer in terms of the value delivered to my projects so far.
  - eric4smith 5y ago
    We don’t regret paying for it at all. Just pointing out its problems.
- NaN1352 5y ago
  I would suggest the use of convention like SuitCss for your custom component classes so you can lint them thoroughly to ensure low specificity. I would recommend to use a prefix on your custom classes, to "namespace" them. "btn" is far too generic. This can even be linted by eg. postcss-bem-linter.
nunodonato 5y ago
welcome to bootstrap
cjohansson 5y ago
I believe in semantic class-names, I know one can transform tailwind into cleaner markup but it seems to introduce more work than just building from scratch
jbverschoor 5y ago
So I don't understand. People are complaining about bootstrap for defaults. Then daisyui has great defaults, and the same class names. I see no reason to customize daisy.
mukhidairyfarm 5y ago
India`s Biggest Hi Tech Organic Dairy Farm in BK Gujarat https://www.mukhidairyfarm.com https://www.mukhidairyfarm.com
eenberg 5y ago
That page is extremely slow without hardware acceleration. It (hw-accel) was off for me because I updated some things without restarting Chromium, but I dunno. It doesn't "spark joy" with me.
- shock-value 5y ago
  I am seeing that also. Continuously used ~50% of my 2015 Macbook Pro's discrete GPU and caused the system fans to kick off, just looking at the components on the landing page.
- elwell 5y ago
  Yeah it is lagging for me too. And I do have hardware accel off as well, because of a chromium bug.
geenat 5y ago
Super laggy components.
z3t4 5y ago
As an old school web dev I write semantic HTML by hand and try to avoid using classes...
ponyous 5y ago
This library highlights the biggest issue of tailwind for me. > Clean HTML The rest of your code will still use bunch of shitty tailwind shortcuts that are really chaotic the moment you build something more than a simplest component.
- Phillips126 5y ago
  I mentioned it in another comment, but I felt the same way until I figured out there is a solution. Here is an example of a simple CSS file with a reusable button class: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } I can now just give all of my reusable buttons the ".button" class instead of the giant string above. I can even add more styles or overwrite existing styles to give it a different look such as: <button class="button bg-red-100 text-red-600">Click Me</button>
kemyd 5y ago
That's an interesting approach with bootstrap-like class names. At Shuffle[1], we create templates for Tailwind, Bootstrap, Bulma, and Material-UI and need to convert UI libraries from one technology to another. We decided to write converters that can transform HTML classes & Tailwind config to Sass config. Probably, we will release it as open-source soon. // Example: // Tailwind.config to Sass // button.js const { theme } = require('../theme.config.js'); module.exports = { bootstrap: { 'input-btn-font-size': theme.fontSize.sm[0], 'input-btn-padding-y': theme.spacing[4], 'input-btn-padding-x': theme.spacing[6], }, bulma: { 'size-normal': theme.fontSize.sm[0], 'button-padding-vertical': theme.spacing[4], 'button-padding-horizontal': theme.spacing[6], }, }; // HTML export const mappings = [ { from: ['flex', 'flex-wrap', '-mx-4'], to: ['row'] }, } [1] https://shuffle.dev https://shuffle.dev
gauchojs 5y ago
I feel like designing for the web is so hard compared to elements that work on the phone. This elements look very "phone sized".
jpomykala 5y ago
You are trying to solve problems which were created by Tailwind, and you end up with Bootstrap.
- peterkelly 5y ago
  I've never used Tailwind, but am familiar with Bootstrap. When looking at the examples, the ones on the right looked pretty much exactly like Bootstrap and I didn't understand what was interesting or novel about it. Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?
  - lyian 5y ago
    Yes, the core idea is that you use a class which applies one css property to the HTML element. In practice you can end up with a lot of classes.
  - ushakov 5y ago
    yes! https://tailwindcss.com https://tailwindcss.com
  - Phillips126 5y ago
    > Is the code on the left (with lots of classes) actually what tailwind is like to use in practice? As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } I can now just give all of my reusable buttons the ".button" class instead of the giant string above.
    - zkldi 5y ago
      But why would you use @apply instead of something like: .button { background-color: $gray-100; border: 1px $gray-200 /\* so on... \*/ } i don't understand how these "micro" css classes actually help versus just setting the property.
devops000 5y ago
Very cool! Would be great to have tile as checkbox component. https://youtu.be/h_7gV44rA-Q?t=19 https://youtu.be/h_7gV44rA-Q?t=19
tomcooks 5y ago
Real nice, pity the "see component" popup that appears when clicking on anyhomepage component prevents from checking it out and there is no way to hide said popup Real nice, looks professional and casual - well done!
- btbuildem 5y ago
  Yeah you have to look with your eyes and not your cursor
armchairhacker 5y ago
We've gone full circle - CSS components to inline CSS-in-HTML back to CSS components. But I actually think I will use this. A big problem with CSS is that you end up making overrides no matter how composable you make the classes. And some simple things (e.g. responsiveness) are unintuitive and / or annoying to do in CSS. Hence Tailwind's "CSS-in-HTML" mini classes. But that doesn't fill the core purpose of CSS, bigger general-purpose classes to avoid repetition. Combine the two (general classes + mini classes for slight case-by-case fixes) and you get the best CSS experience I've seen so far (at least I think, I haven't tried it yet).
- rmetzler 5y ago
  I also haven’t done much CSS since bootstrap 2.x days. I wonder if there is some tooling you would run in your CI to propose CSS changes - not failing like most linters but just nudge the devs a little to improve on low hanging fruits.
  - edoceo 5y ago
    Back in the day it was `grep style=` in the code. All over-rides started there, then would (eventually?) get promoted.
- 411111111111111 5y ago
  It's not really full circle considering that tailwind-ui has always been how the people that created tailwind made their money. Tailwind never wanted to remove component libraries, they just wanted a straightforward and easy way to make these components.
  - faeyanpiraat 5y ago
    Op meant it in a bigger-picture-way. Oldschool custom stuff -> BS -> Tailwind -> Tailwind with BS UX
- beardedetim 5y ago
  > A big problem with CSS is that you end up making overrides no matter how composable you make the classes. And some simple things (e.g. responsiveness) are unintuitive and / or annoying to do in CSS. 10000% agree with this. I have found that copy/paste until you need to go back and change the same value a few times is worth its weight in salt with CSS. Never has "a poor abstraction is worse than duplicate code" been truer than in CSS. What I found in my FE days ways that it wasn't until the project shipped and we were iterating on v2 did the actual reusable classes appear.
jcq3 5y ago
Yet another bootstrap? I don't see any difference. Sorry I'm not a frontend dev, what's the value added of this?
bilekas 5y ago
This is actually beautiful, and really clean.. I will definitely be giving this a try. Nice job!
gcatalfamo 5y ago
Could somebody who used both this and Bulma give an overview?
debarshri 5y ago
I am new to UI/UX. Is it comparable to bootstrap? How is it actually different from the CSS and UI component libraries?
- saadeghi 5y ago
  You could say it's a component library like Bootstrap but it's customizable in core because it's based on Tailwind CSS. For example if you want to customize a Bootstrap button, you need to write additional CSS files. With daisyUI you can simply add a class name.
  - hu3 5y ago
    > For example if you want to customize a Bootstrap button, you need to write additional CSS files No you don't need to write CSS files for that. Bootstrap also offers utility classes. If I want to customize padding I can add "p-3" or "p-4" class for example. Same for other properties including colors like "bd-blue-800". See: https://getbootstrap.com/docs/5.0/customize/color/ https://getbootstrap.com/docs/5.0/customize/color/
  - debarshri 5y ago
    Is it similar to reactstrap or react bootstrap?
midrus 5y ago
This looks awesome. Definitely will use it in my next project. Great work!!!!!
axegon_ 5y ago
Great! Over the past 6 months or so I've noticed a trend which I like: people are less obsessed with all the modern react-angular-vue-js-everything-html-css-bad notion and a lot of people are starting to admit that this whole sack of gibberish is unmanagable and unmaintainable(the web got it's own version of segfaults where something crashes and no one has even the slightest idea why) and we are coming full circle back to the late 2000's internet. Which to my mind was the golden age of the internet: you could slap a vga cable onto a potato and it had the computational power to display any page, whereas in recent years a single page eating up 200+ mb of your memory and increasing the cpu usage by 15-20% was a completely normal phenomenon. Oh and let's not forget "ew jquery, that's 200kb, that's horrible" all while bundle.min.js is a 15mb freak. Good job, personally I had completely lost hope, now I am starting to have some.
robertwt7 5y ago
So much love for tailwind, I love it. Honestly though I haven't use any other component than Material-UI for the past couple of years. I was thinking to convince my previous company to buy tailwind-ui just for the sake of curiosity :p but then I know I won't use it much. So not sure.. In the end the point of all of us using tailwind is because its not "opinionated" like bootstrap right?
FractalHQ 5y ago
I am so glad that I took the time to get fast with CSS. I can build unique UIs in real time, and with Svelte Components, everything is automatically scoped to the component. I would waste so much time and gave a lot of analysis paralysis if I had to choose from all these cool looking libraries and frameworks, learn their api’s, and then learn how to override them more and more over time.
sgt 5y ago
Recently bought Tailwind UI. Haven't really used it much except for a concept UI, and didn't work completely out of the box (you kind of have to know something about Tailwind the open source project first). Aside from that, it looks like a really convenient way to put together a web UI when you don't really want to focus on the UI part of your app too much. Not too expensive either, I think it was $175 or so.
chris_st 5y ago
Really like DaisyUI, it's a nice quick way to get a light, consistent page built. I recently found a problem with DaisyUI, put up an issue, and it was promptly and politely fixed.
NaN1352 5y ago
Looks good. I’d really like to use this. Mainly I like that the author used same approach as I do whereby with careful use of low specificity, a custom "btn" class can be further customized just by adding TW classes (ie. not css specificity issues). My only gripe with this is that you should then use a clearly defined and separate naming convention for custom classes, for example SuitCSS is good: Not btn btn-large rounded-full But du-Btn du-Btn—-primary rounded-full ie. PascalCase component names, optional prefix (eg. du for daisy ui, because other apps also have their prefix see eg. Twitch and Algolia css) Bem conventions like double dash for modifier as opposed to a descendant https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve... So yeah I would like to be able at a glance to know where a class is from. "btn" is not from tailwind, but where is it from? What if my app uses multiple components, from third party etc? It’s not clear. Other than that This is better than Bootstrap approach even with custom classes, because you take care of css specificity problem (assuming you can add a tw class anywhere and override the builtin custom classes)... this is the middle way that nobody uses for whatever reason, the one that makes sense, but requires a good basic understanding of css specificity as well as setup stringent css linter Also using a convention would let you use a good linter on the custom selectors https://github.com/postcss/postcss-bem-linter https://github.com/postcss/postcss-bem-linter
- e12e 5y ago
  Why mix in Pascal case ?
XCSme 5y ago
I am not sure this is production-ready. I had a look over some components and the UI/UX is poor in general (bad alignment, padding, bad accessibility, no proper focus traps, no keyboard support, etc.). Maybe some of those are lacking because it is a CSS-only implementation? But you still can't use them as it is without proper accessibility support.
thrownaway561 5y ago
so you recreate bootstrap with tailwinds... we've come full circle.
btbuildem 5y ago
Ok, I'll guess I'll be the lone voice of dissent here. I don't like it. I think it goes against the concept of utility classes / functional CSS. As soon as you start making component-level classes, things begin to become opinionated and you lose the universality. My understanding of the functional CSS approach was that you'd make a button component, and use the variety of "atomic" classes to style it. If you're using a "btn" class etc, it muddles the distinction of where the semantics live, and things get harder to reason about / debug.
- manquer 5y ago
  Absolutes are the problem. DaisyUI gives the flexibility of using Tailwind directly or higher level classes. Tailwind is great but sometimes you end up having 10-15+ classes for basic components that makes the code harder to read and reason with. We should have utility classes and composability, but relying on them exclusively is also not necessarily the best way either.
  - azemetre 5y ago
    Can't you just use @apply to make a single uniform style that utilizes all those classes? That's my understanding at least, like if you want to make a button, instead of have the same 10+ classes posted everywhere you make a new class with @apply and keep the styles uniform. Then in the future if you need to change one of the core utilities it's also easily updated to all you the @apply classes you make. Am I misunderstanding the purpose? I've only used tailwind twice.
    - manquer 5y ago
      yes you can use @apply. DaisyUI also supports @apply directives as well both for their own and tailwind clases. However you have to use them yourself. With vanilla Tailwind there is no out of the box @apply directives already set you can use. Think of DaisyUI as basically a whole set of @applies someone already made for you. For users new to frameworks with utility focus it can be less steep learning curve to experiment and all the out of the box abstractions can reduce the need for having your own.
csabakissi 5y ago
One of the best looking tailwindcss components. I'm wondering if this library will grow in the future to something much bigger.
DLA 5y ago
Using DaisyUI for three projects currently and LOVE the hell out of it. Don't get me wrong I love some TailwindUI as well, but the simplicity of Daisy is fantastic. Winning combination for us: DaisyUI + TWCSS + AlpineJS + Go Fiber server & templates.
happy_one 5y ago
Is there something exactly like this that doesn't depend on tailwind? Using bootstrap themes are what I do now but they always have a limited number of components and don't have ready to go, copy-pastable documentation. Ideally I'd have a library that I can just copy paste beautiful pre-made components.
deleted 5y ago
[deleted]
conatus 5y ago
Cool to see this out, but there is something about Tailwind I've never really got. And this is not from abstraction, but in production use on a number of pretty large sites. Each Tailwind class corresponds to a CSS property, with a few exceptions where you have utility classes for degrees of that property (for example, padding, margin). Then along come these CSS component libraries, which substitute a thicket of these utility classes for a single class. Including Tailwind UI itself. Given that the relationship of class to property is one to one, why not cut out the middle person and just use CSS directly? There seems no real advantage. You've basically indepedently re-invented CSS, while adding a strange layer of additional abstraction on top. It is nice and fast to write it in the HTML I'll grant, but, the speed advantage is not so great that it is worth it compared to the mental overhead of other aspects of working with Tailwind (e.g. having to trim all the classes with automated scripts and so on). Perhaps I am missing something here?
- verisimilidude 5y ago
  For each project, there's a unique balance between HTML, CSS, and the greater organization. Consider a site that mostly renders Markdown or XML documents. Tailwind is probably the wrong choice. You have less control of the HTML content in this case, because it's generated. If you want to use Tailwind here, you'd need to make liberal use of Tailwind's @apply directive for basic declarations, which IMO is not the best expression of Tailwind usage. On the other hand, you have a lot of control over the CSS. It makes more sense to write the CSS directly. Now consider an organization with many separate web properties, which all require consistent branding. The organization has a UI guy who creates universal stylesheets and components for use across sites. Here you have less control over the CSS, and more over the HTML. Tailwind makes more sense. You can add all the utility classes to HTML that you want, with few overrides or other enterprise pull-ups. This latter scenario also highlights one of Tailwind's strengths. Tailwind limits your options. If you need to keep a brand consistent across a large number of properties, Tailwind keeps you in the guardrails of the style guide. I can't be the only one who's worked at an organization where there's supposed to be only one shade of blue to represent the brand, but you wind up finding 160 different shades of blue throughout the CSS. Anyway, Tailwind has its time and place. I love it when it fits.
ceiphr 5y ago
I love the little Cyberpunk theme example.
swyx 5y ago
Other tailwind component libraries I track: - https://github.com/thedevdojo/tails https://github.com/thedevdojo/tails - http://tailwindcomponents.com/ http://tailwindcomponents.com/ - https://tailwindui.com/components https://tailwindui.com/components - https://merakiui.com/ https://merakiui.com/ - https://www.gustui.com/ https://www.gustui.com/ - https://mertjf.github.io/tailblocks/ https://mertjf.github.io/tailblocks/ - https://shuffle.dev/ https://shuffle.dev/ Tailwind visual builder (from my resources list https://github.com/sw-yx/spark-joy/ https://github.com/sw-yx/spark-joy/)

474 points by jonifico 5y ago

this is so good! I wish the author would also put up a purchase page on https://themeforest.net/ https://themeforest.net/ . I dont mind optionally paying for it - especially a nicely packaged starter for nextjs, etc

irrational 5y ago

Anyone with experience using Tailwind UI want to comment on how this compares?

Brajeshwar 5y ago
Here is my quick observation on a cursory glance. DaisyUI is beautifully written. This can be the kit with a boatload of work done for you. Think like Bootstrap but better with Tailwind. You can use this to teach how to write well thought-out CSS codes, separation, and extensibility. TailwindUI is more like Bourbon[1] (was my go-to Sass tool) but on the structural interfaces done for you. I'm standardizing out Web, WebApps, and marketing materials to start with TailwindUI. Someone with good chop of CSS/Tailwind won't likely need to use TailwinUI but it can be a fast tool for teams. It is highly extensible but also has the double-edge sword criteria that a rookie can just keep copy-pasting, repeating codes and still work (not a good thing). Will we use DaisyUI for the team? Unlikely! Will I use it for some quick but still larger project, marketing page? I might very likely. 1. https://www.bourbon.io https://www.bourbon.io
nkmnz 5y ago
Using tailwindUI a lot. This doesn’t come close in terms of visual quality.
ing33k 5y ago
I recently used Tailwind UI to build https://zcashblockexplorer.com https://zcashblockexplorer.com Tailwind UI is great! ( please note that I a primarily a backend dev with limited knowledge of CSS ) Looking forward to explore DaisyUI soon !

deleted 5y ago

[deleted]

whoisjuan 5y ago

I’m not saying this is ugly but the visual execution of some of these components is poor. No good usage of padding in some examples, poor ratios between the typography and the containers, inconsistent use of different line widths and border radius, weird and incosistent design choices in spacing and proportions… I mean. This looks alright and it will certainly make any UI look pretty decent, but the execution is not superb like the actual TailwindUI library which is incredibly well thought from a visual design perspective. Those components are perhaps less shiny than these but they are incredibly functional and way more intentional. This is a good effort though and I hope to see it improving.

joexuyi 5y ago
Agreed. Not to sound too critical, but it looks off.
AngeloAnolin 5y ago
I think it is not a fair comparison with the Tailwind UI where there's probably more than one person doing the work plus the whole expertise of the actual Tailwind authors in the mix. If you are able to observe what is severely lacking in this implementation, I am pretty sure that the Github author would welcome your suggestions / comments / PRs and any contribution to make this better. For a start, this is actually good (enough). In the same vein that TailwindUI is still continuing to evolve as the maintainers are finding optimization to make it better.
- whoisjuan 5y ago
  Totally agree and I mean it with no animosity. As an adopter of Tailwind, I really want to see more of these components kits and for the exisiting ones to keep improving.
thomasfl 5y ago
A few pull requests could fix most of what you mentioned, if the maintainer approved it.
onion2k 5y ago

hashedout 5y ago

This is a very nice step in making Tailwind more Bootstrap like (read beginner friendly). One common complaint about Tailwind is that it makes the HTML look very full (full of classes). A very good example on OP's website for a button: Using tailwind: <a class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600">Button</a> Using daisy: <a class="btn btn-primary">Button</a> Although I personally think that the corners at a bit too rounded by default, giving it a very amateur look but I think you can customize that. But a very promising project indeed.

joexuyi 5y ago
so why not just use bootstrap? I'm new to web development, but I thought the whole point of TailwindCSS is that it is more customisable than Bootstrap.
- hashedout 5y ago
  What if you as a beginner can start using Tailwind immediately with this library and can learn tailwind's utility classes at your own pace when you need to customize anything? I'm not sure about this path, but it might be good for a beginner.
  - thecryptodiver 5y ago
    Yeah, this seems more like the combo of ease of Bootstrap + the extendability of Tailwind.
- volkandkaya 5y ago
  It is hard to breakout of Bootstrap defaults. Both libraries have pros and cons.
supermatt 5y ago
Thats exactly what this component library does: https://daisyui.com/components/button https://daisyui.com/components/button If you want to do in "raw" tailwind (i.e. without this component library), you can use layers to create your own component classes, e.g.: @layer components { .btn { @apply inline-block px-4 py-3 text-sm font-semibold text-center uppercase transition duration-200 ease-in-out rounded-md cursor-pointer; } .btn-primary { @apply text-white bg-indigo-500 hover:bg-indigo-600; } }

Brajeshwar 5y ago

For those wishing to learn the intricacies and beauty of Tailwind, this is a good source. Well written code but might lack the finesse of design. Then use TailwindUI[1] as a kit for your design/frontend team. 1. https://tailwindui.com https://tailwindui.com

soheil 5y ago

Oh I pray that I remember this website next time I'm looking for an HTML/css template. Great job, this UI looks so polished and is as modern as it gets.

Brajeshwar 5y ago
A much simpler Bootstrapped powered one popped up on Hackernews recently, https://frontendor.com https://frontendor.com

hardwaresofton 5y ago

In this space also: https://blocks.wickedtemplates.com https://blocks.wickedtemplates.com (NOTE: I did not WickedBlocks/WickedTemplates -- it's the awesome work of the folks over at WickedTemplates https://wickedtemplates.com https://wickedtemplates.com, which they shared on HN I believe a while back) I'm actually working on a little side project right now where I turn wickedblocks into a set of usable native web components (as in drop an <import> tag and the component on your page and you're off to the races), because I think that's a much more composable way to use these snippets copy & pasting HTML, looks like Daisy needs to be next. [EDIT] A bit annoying to others probably to drop a lede and I have no idea when I'll get done and publish it with the blog post so if someone just wants to see the code: https://gitlab.com/mrman/landing-gear https://gitlab.com/mrman/landing-gear If anyone wants to contribute a snazzy icon I'd love to take it! There's no landing page to showcase it yet but there's files like lg-left-header/index.html[0] which showcase usage and the intended simplicity. Obviously if you're trying to get started, use the blocks as they're presented and the awesome work done by WickedTemplates (they've also got some ready-to-go straight out of the box templates and other stuff for you to use on their main site!), but if you're interested in lit[1]-powered drop-in components, follow that space. [EDIT2] - For those taking a look at the code, note that there are like... 4 variants of the left-header component. Half of the time spent getting this out (it's all simple in theory -- just copy + paste and swap out static text for variables) was figuring out which parts to unify and which parts to keep separate for easy drop-in use. There's not much there yet, but it's more a matter of me finding time to sit down and make these decisions for every kind of component on the wickedblocks page. There are some concerns like i18n that I've punted on by just making sure that all static text were component inputs, but ideally integration with browser-supported i18n[2] is the proper way to do things in a minimal but standards compliant way. [EDIT3] - Added note to make it clear I didn't create WickedBlocks/WickedTemplates [0]: https://gitlab.com/mrman/landing-gear/-/blob/main/lg-left-header/index.html https://gitlab.com/mrman/landing-gear/-/blob/main/lg-left-he... [1]: https://lit.dev/ https://lit.dev/ [2]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...

Mike_Andreuzza 5y ago
Nice one.

vachi 5y ago

My team and I also made a similar library, more so for dashboards. https://github.com/mutable/meiosis https://github.com/mutable/meiosis

tpetry 5y ago

I am more impressed by the landing page than the actual components. Is anyone aware of a good component library for landing/marketing pages for Tailwind? There are toolkits like https://frontendor.com https://frontendor.com but they all follow the 5-10 year old "theme" of insanely packed content you had seen on SaaS pages some years ago. Together with many photographs or flat humans... I can't find anything with "new" approach which uses more padding, much more detail to typography, bigger fonts etc. shown very good on the https://tailwindcss.com https://tailwindcss.com landing page. Or any hint where all the new startups get their designers for these new fresh layouts?

BigJono 5y ago
I must be getting old because I literally don't get front end devs these days... The landing page is like a few divs with some position centres. What would you even use a "component library" for in this case? The only thing on the entire page with any complexity whatsoever are the component demos (which are obviously part of this DaisyUI thing itself) and the code blocks/syntax highlighting, which I'm sure there's a billion libraries for already. I'm really struggling to come up with any sort of other dependency that would help me build that page any faster than just opening the text editor and shitting out some HTML and CSS. Do people just spend so much time working with Bootstrap and whatever other cruft that they just never bother to learn the basics? At this level of simplicity and for churning out marketing pages where you don't care about maintainability, you're probably better off looking for a WYSIWYG editor rather than a library.
- da39a3ee 5y ago
  You must indeed be getting very old. The purpose of the library is not to implement its own landing page.
Pluiesurlavitre 5y ago
Did you check https://tailwindui.com/ https://tailwindui.com/ ?
bennyp101 5y ago
There is an awesome[1] site for tailwind that has lots of places that could give you ideas. Or you could buy the Tailwind UI[2] - they add lots fairly often. [1] https://github.com/aniftyco/awesome-tailwindcss https://github.com/aniftyco/awesome-tailwindcss [2] https://www.tailwindui.com https://www.tailwindui.com

catmanjan 5y ago

I've heard a lot about how great tailwind is, can anyone point to some good examples of people using it? Most of what I can find is just samples

leodriesch 5y ago
https://github.com/vercel/commerce https://github.com/vercel/commerce

timwis 5y ago

Interesting side effects of css utility frameworks: I was trying to scrape a website that uses tailwind this week and it’s really difficult, as nothing had a unique class name.

gear54rus 5y ago
It is also an effect of various css-in-js shit, you can't know what the element does if it doesn't have a tooltip. Because now the class name is gibberish.
jokethrowaway 5y ago
That's not very nice, maintainability suffers in the same way. You can obfuscate your classes later on. But alas, the battle for semantic css has already been lost and the community keep going in the opposite way (first bootstrap, which was halfway through, now tailwind which is basically inline styles with variables).

runawaybottle 5y ago

My goodness Bootstrap, how far ahead of your time you were. To this day we copy you, god bless you m’lord. Nope, I reject this. We should be so much farther ahead than this. It’s the garbage fullstack developers that need this crap to make a good ui. They don’t belong on the frontend, and I’m pretty tired of it. Our UI/UX will get shittier and shittier if we coddle this group.

deleted 5y ago
[deleted]
aniforprez 5y ago
This is probably one of the saltiest comments I've read here

volkandkaya 5y ago

DaisyUI is a great starting point but it is missing a lot to make it functional and then you end up recreating the wheel. I agree with some comments that it is lacking that wow factor that TailwindUI has. I'm working on https://versoly.com/ https://versoly.com/ which is a Tailwind Website builder and have ran into a bunch of issues with Tailwind when it comes to building static sites. I love that Bootstrap offer "btn btn-primary" and it makes it very easy to keep a consistent site. For Tailwind to take off it needs - A list of components (maybe 20 ish, buttons, tabs, navbars being the main ones) - JS for components - Container system (I have built one that works similar to Bootstrap and makes it much easier to create responsive layouts quickly) Once those core parts have been built I believe developers will create more advanced libraries such as lightboxes etc which will save even more time. I'm a big fan of the new https://github.com/vuejs/petite-vue https://github.com/vuejs/petite-vue which is only 5kb and comes with a lot of power. Also combining it with something like https://github.com/CaptainCodeman/x-transition https://github.com/CaptainCodeman/x-transition would be interesting. I really want to see Tailwind grow so if you're interested in opensource or want to create paid UI kits feel free dm as I have a ton of ideas.

kristiandupont 5y ago
>For Tailwind to take off it needs You have a lot higher standards than I about what "taking off" means :-D
- volkandkaya 5y ago
  It is doing amazing. But I talk with a lot of full stack and backend developers who still use Bootstrap. They even own TailwindUI and other templates but stick to Bootstrap. That to me means there is a big issue with Tailwind and the developer experience. Once solved Tailwind will grow even faster and help more developers/companies.

FrontAid 5y ago

That page broke tabbing through interactive elements by using nested focussable elements like this: <div tabindex="0"><input ...></div> Because of that, it is sometimes necessary to tab twice to focus the next element. Not sure whether that is a problem of DaisyUI in general or just their website. But it is definitely annoying.

Aeolun 5y ago

I tried using Tailwind, but I just couldn’t get into it. It’s like having to learn CSS all over again because the classnames do not map 1-1 with their respective properties, and autocomplete is lacking. Conversely, Chakra UI Box, which does more or less the same thing is super easy to get into. This looks nice, but I kind of feel like we’ve come full circle two full times to get to this point.

bennyp101 5y ago
I'm not sure why you would want them to map 1-1? Might as well just write inline styles surely? For autocomplete, have you seen https://tailwindcss.com/docs/editor-support https://tailwindcss.com/docs/editor-support ? I use it in PHPStorm and VSCode and I get class name autocompletion just fine.
- mhitza 5y ago
  Autocompletion works for now, but won't work in the future when JIT mode is default (unless they figure out some trickery). As a JIT mode user, the 1-1 naming would really be useful now.

eric4smith 5y ago

Very welcome. Sometimes the amount of classes needed in Tailwind is enormous. I paid for the TailwindUI pack too. But as nice as Tailwind is, the guys who built TailwindUI don't really get or understand a lot of real-world design patterns. A lot of stuff in there is needlessly complicated. Our team end up trimming down things to 50% of the markup that they use, while retaining full responsiveness. Overuse of flex for simple paradigms is a constant complaint of mine. Hope DaisyUI improves Tailwind in some way. Anyway... sorry to get sidetracked on a sidebar.. lol.

Mike_Andreuzza 5y ago
>>>Our team end up trimming down things to 50% of the markup that they use, while retaining full responsiveness. I have to agree with this.
nickjj 5y ago
There's also https://tailkit.com/ https://tailkit.com/, the markup is pretty reasonable. It was designed by someone who has been making themes for ~10 years. I did a review of Tailkit in general here: https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwind-components-and-giving-away-2-copies https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwin...
tailspin2019 5y ago
> the guys who built TailwindUI don't really get or understand a lot of real-world design patterns It's all relative. It's clear they understand more than I do, and I'm not a terrible UI designer, so paying for TailwindUI has been a no-brainer in terms of the value delivered to my projects so far.
- eric4smith 5y ago
  We don’t regret paying for it at all. Just pointing out its problems.
NaN1352 5y ago
I would suggest the use of convention like SuitCss for your custom component classes so you can lint them thoroughly to ensure low specificity. I would recommend to use a prefix on your custom classes, to "namespace" them. "btn" is far too generic. This can even be linted by eg. postcss-bem-linter.

nunodonato 5y ago

welcome to bootstrap

cjohansson 5y ago

I believe in semantic class-names, I know one can transform tailwind into cleaner markup but it seems to introduce more work than just building from scratch

jbverschoor 5y ago

So I don't understand. People are complaining about bootstrap for defaults. Then daisyui has great defaults, and the same class names. I see no reason to customize daisy.

mukhidairyfarm 5y ago

India`s Biggest Hi Tech Organic Dairy Farm in BK Gujarat https://www.mukhidairyfarm.com https://www.mukhidairyfarm.com

eenberg 5y ago

That page is extremely slow without hardware acceleration. It (hw-accel) was off for me because I updated some things without restarting Chromium, but I dunno. It doesn't "spark joy" with me.

shock-value 5y ago
I am seeing that also. Continuously used ~50% of my 2015 Macbook Pro's discrete GPU and caused the system fans to kick off, just looking at the components on the landing page.
elwell 5y ago
Yeah it is lagging for me too. And I do have hardware accel off as well, because of a chromium bug.

geenat 5y ago

Super laggy components.

z3t4 5y ago

As an old school web dev I write semantic HTML by hand and try to avoid using classes...

ponyous 5y ago

This library highlights the biggest issue of tailwind for me. > Clean HTML The rest of your code will still use bunch of shitty tailwind shortcuts that are really chaotic the moment you build something more than a simplest component.

Phillips126 5y ago
I mentioned it in another comment, but I felt the same way until I figured out there is a solution. Here is an example of a simple CSS file with a reusable button class: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } I can now just give all of my reusable buttons the ".button" class instead of the giant string above. I can even add more styles or overwrite existing styles to give it a different look such as: <button class="button bg-red-100 text-red-600">Click Me</button>

kemyd 5y ago

That's an interesting approach with bootstrap-like class names. At Shuffle[1], we create templates for Tailwind, Bootstrap, Bulma, and Material-UI and need to convert UI libraries from one technology to another. We decided to write converters that can transform HTML classes & Tailwind config to Sass config. Probably, we will release it as open-source soon. // Example: // Tailwind.config to Sass // button.js const { theme } = require('../theme.config.js'); module.exports = { bootstrap: { 'input-btn-font-size': theme.fontSize.sm[0], 'input-btn-padding-y': theme.spacing[4], 'input-btn-padding-x': theme.spacing[6], }, bulma: { 'size-normal': theme.fontSize.sm[0], 'button-padding-vertical': theme.spacing[4], 'button-padding-horizontal': theme.spacing[6], }, }; // HTML export const mappings = [ { from: ['flex', 'flex-wrap', '-mx-4'], to: ['row'] }, } [1] https://shuffle.dev https://shuffle.dev

gauchojs 5y ago

I feel like designing for the web is so hard compared to elements that work on the phone. This elements look very "phone sized".

jpomykala 5y ago

You are trying to solve problems which were created by Tailwind, and you end up with Bootstrap.

peterkelly 5y ago
I've never used Tailwind, but am familiar with Bootstrap. When looking at the examples, the ones on the right looked pretty much exactly like Bootstrap and I didn't understand what was interesting or novel about it. Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?
- lyian 5y ago
  Yes, the core idea is that you use a class which applies one css property to the HTML element. In practice you can end up with a lot of classes.
- ushakov 5y ago
  yes! https://tailwindcss.com https://tailwindcss.com
- Phillips126 5y ago
  > Is the code on the left (with lots of classes) actually what tailwind is like to use in practice? As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } I can now just give all of my reusable buttons the ".button" class instead of the giant string above.
  - zkldi 5y ago
    But why would you use @apply instead of something like: .button { background-color: $gray-100; border: 1px $gray-200 /\* so on... \*/ } i don't understand how these "micro" css classes actually help versus just setting the property.

devops000 5y ago

Very cool! Would be great to have tile as checkbox component. https://youtu.be/h_7gV44rA-Q?t=19 https://youtu.be/h_7gV44rA-Q?t=19

tomcooks 5y ago

Real nice, pity the "see component" popup that appears when clicking on anyhomepage component prevents from checking it out and there is no way to hide said popup Real nice, looks professional and casual - well done!

btbuildem 5y ago
Yeah you have to look with your eyes and not your cursor

armchairhacker 5y ago

We've gone full circle - CSS components to inline CSS-in-HTML back to CSS components. But I actually think I will use this. A big problem with CSS is that you end up making overrides no matter how composable you make the classes. And some simple things (e.g. responsiveness) are unintuitive and / or annoying to do in CSS. Hence Tailwind's "CSS-in-HTML" mini classes. But that doesn't fill the core purpose of CSS, bigger general-purpose classes to avoid repetition. Combine the two (general classes + mini classes for slight case-by-case fixes) and you get the best CSS experience I've seen so far (at least I think, I haven't tried it yet).

rmetzler 5y ago
I also haven’t done much CSS since bootstrap 2.x days. I wonder if there is some tooling you would run in your CI to propose CSS changes - not failing like most linters but just nudge the devs a little to improve on low hanging fruits.
- edoceo 5y ago
  Back in the day it was `grep style=` in the code. All over-rides started there, then would (eventually?) get promoted.
411111111111111 5y ago
It's not really full circle considering that tailwind-ui has always been how the people that created tailwind made their money. Tailwind never wanted to remove component libraries, they just wanted a straightforward and easy way to make these components.
- faeyanpiraat 5y ago
  Op meant it in a bigger-picture-way. Oldschool custom stuff -> BS -> Tailwind -> Tailwind with BS UX
beardedetim 5y ago
> A big problem with CSS is that you end up making overrides no matter how composable you make the classes. And some simple things (e.g. responsiveness) are unintuitive and / or annoying to do in CSS. 10000% agree with this. I have found that copy/paste until you need to go back and change the same value a few times is worth its weight in salt with CSS. Never has "a poor abstraction is worse than duplicate code" been truer than in CSS. What I found in my FE days ways that it wasn't until the project shipped and we were iterating on v2 did the actual reusable classes appear.

jcq3 5y ago

Yet another bootstrap? I don't see any difference. Sorry I'm not a frontend dev, what's the value added of this?

bilekas 5y ago

This is actually beautiful, and really clean.. I will definitely be giving this a try. Nice job!

gcatalfamo 5y ago

Could somebody who used both this and Bulma give an overview?

debarshri 5y ago

I am new to UI/UX. Is it comparable to bootstrap? How is it actually different from the CSS and UI component libraries?

saadeghi 5y ago
You could say it's a component library like Bootstrap but it's customizable in core because it's based on Tailwind CSS. For example if you want to customize a Bootstrap button, you need to write additional CSS files. With daisyUI you can simply add a class name.
- hu3 5y ago
  > For example if you want to customize a Bootstrap button, you need to write additional CSS files No you don't need to write CSS files for that. Bootstrap also offers utility classes. If I want to customize padding I can add "p-3" or "p-4" class for example. Same for other properties including colors like "bd-blue-800". See: https://getbootstrap.com/docs/5.0/customize/color/ https://getbootstrap.com/docs/5.0/customize/color/
- debarshri 5y ago
  Is it similar to reactstrap or react bootstrap?

midrus 5y ago

This looks awesome. Definitely will use it in my next project. Great work!!!!!

axegon_ 5y ago

Great! Over the past 6 months or so I've noticed a trend which I like: people are less obsessed with all the modern react-angular-vue-js-everything-html-css-bad notion and a lot of people are starting to admit that this whole sack of gibberish is unmanagable and unmaintainable(the web got it's own version of segfaults where something crashes and no one has even the slightest idea why) and we are coming full circle back to the late 2000's internet. Which to my mind was the golden age of the internet: you could slap a vga cable onto a potato and it had the computational power to display any page, whereas in recent years a single page eating up 200+ mb of your memory and increasing the cpu usage by 15-20% was a completely normal phenomenon. Oh and let's not forget "ew jquery, that's 200kb, that's horrible" all while bundle.min.js is a 15mb freak. Good job, personally I had completely lost hope, now I am starting to have some.

robertwt7 5y ago

So much love for tailwind, I love it. Honestly though I haven't use any other component than Material-UI for the past couple of years. I was thinking to convince my previous company to buy tailwind-ui just for the sake of curiosity :p but then I know I won't use it much. So not sure.. In the end the point of all of us using tailwind is because its not "opinionated" like bootstrap right?

FractalHQ 5y ago

I am so glad that I took the time to get fast with CSS. I can build unique UIs in real time, and with Svelte Components, everything is automatically scoped to the component. I would waste so much time and gave a lot of analysis paralysis if I had to choose from all these cool looking libraries and frameworks, learn their api’s, and then learn how to override them more and more over time.

sgt 5y ago

Recently bought Tailwind UI. Haven't really used it much except for a concept UI, and didn't work completely out of the box (you kind of have to know something about Tailwind the open source project first). Aside from that, it looks like a really convenient way to put together a web UI when you don't really want to focus on the UI part of your app too much. Not too expensive either, I think it was $175 or so.

chris_st 5y ago

Really like DaisyUI, it's a nice quick way to get a light, consistent page built. I recently found a problem with DaisyUI, put up an issue, and it was promptly and politely fixed.

NaN1352 5y ago

Looks good. I’d really like to use this. Mainly I like that the author used same approach as I do whereby with careful use of low specificity, a custom "btn" class can be further customized just by adding TW classes (ie. not css specificity issues). My only gripe with this is that you should then use a clearly defined and separate naming convention for custom classes, for example SuitCSS is good: Not btn btn-large rounded-full But du-Btn du-Btn—-primary rounded-full ie. PascalCase component names, optional prefix (eg. du for daisy ui, because other apps also have their prefix see eg. Twitch and Algolia css) Bem conventions like double dash for modifier as opposed to a descendant https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve... So yeah I would like to be able at a glance to know where a class is from. "btn" is not from tailwind, but where is it from? What if my app uses multiple components, from third party etc? It’s not clear. Other than that This is better than Bootstrap approach even with custom classes, because you take care of css specificity problem (assuming you can add a tw class anywhere and override the builtin custom classes)... this is the middle way that nobody uses for whatever reason, the one that makes sense, but requires a good basic understanding of css specificity as well as setup stringent css linter Also using a convention would let you use a good linter on the custom selectors https://github.com/postcss/postcss-bem-linter https://github.com/postcss/postcss-bem-linter

e12e 5y ago
Why mix in Pascal case ?

XCSme 5y ago

I am not sure this is production-ready. I had a look over some components and the UI/UX is poor in general (bad alignment, padding, bad accessibility, no proper focus traps, no keyboard support, etc.). Maybe some of those are lacking because it is a CSS-only implementation? But you still can't use them as it is without proper accessibility support.

thrownaway561 5y ago

so you recreate bootstrap with tailwinds... we've come full circle.

btbuildem 5y ago

Ok, I'll guess I'll be the lone voice of dissent here. I don't like it. I think it goes against the concept of utility classes / functional CSS. As soon as you start making component-level classes, things begin to become opinionated and you lose the universality. My understanding of the functional CSS approach was that you'd make a button component, and use the variety of "atomic" classes to style it. If you're using a "btn" class etc, it muddles the distinction of where the semantics live, and things get harder to reason about / debug.

manquer 5y ago
Absolutes are the problem. DaisyUI gives the flexibility of using Tailwind directly or higher level classes. Tailwind is great but sometimes you end up having 10-15+ classes for basic components that makes the code harder to read and reason with. We should have utility classes and composability, but relying on them exclusively is also not necessarily the best way either.
- azemetre 5y ago
  Can't you just use @apply to make a single uniform style that utilizes all those classes? That's my understanding at least, like if you want to make a button, instead of have the same 10+ classes posted everywhere you make a new class with @apply and keep the styles uniform. Then in the future if you need to change one of the core utilities it's also easily updated to all you the @apply classes you make. Am I misunderstanding the purpose? I've only used tailwind twice.
  - manquer 5y ago
    yes you can use @apply. DaisyUI also supports @apply directives as well both for their own and tailwind clases. However you have to use them yourself. With vanilla Tailwind there is no out of the box @apply directives already set you can use. Think of DaisyUI as basically a whole set of @applies someone already made for you. For users new to frameworks with utility focus it can be less steep learning curve to experiment and all the out of the box abstractions can reduce the need for having your own.

csabakissi 5y ago

One of the best looking tailwindcss components. I'm wondering if this library will grow in the future to something much bigger.

DLA 5y ago

Using DaisyUI for three projects currently and LOVE the hell out of it. Don't get me wrong I love some TailwindUI as well, but the simplicity of Daisy is fantastic. Winning combination for us: DaisyUI + TWCSS + AlpineJS + Go Fiber server & templates.

happy_one 5y ago

Is there something exactly like this that doesn't depend on tailwind? Using bootstrap themes are what I do now but they always have a limited number of components and don't have ready to go, copy-pastable documentation. Ideally I'd have a library that I can just copy paste beautiful pre-made components.

deleted 5y ago

[deleted]

conatus 5y ago

Cool to see this out, but there is something about Tailwind I've never really got. And this is not from abstraction, but in production use on a number of pretty large sites. Each Tailwind class corresponds to a CSS property, with a few exceptions where you have utility classes for degrees of that property (for example, padding, margin). Then along come these CSS component libraries, which substitute a thicket of these utility classes for a single class. Including Tailwind UI itself. Given that the relationship of class to property is one to one, why not cut out the middle person and just use CSS directly? There seems no real advantage. You've basically indepedently re-invented CSS, while adding a strange layer of additional abstraction on top. It is nice and fast to write it in the HTML I'll grant, but, the speed advantage is not so great that it is worth it compared to the mental overhead of other aspects of working with Tailwind (e.g. having to trim all the classes with automated scripts and so on). Perhaps I am missing something here?

verisimilidude 5y ago
For each project, there's a unique balance between HTML, CSS, and the greater organization. Consider a site that mostly renders Markdown or XML documents. Tailwind is probably the wrong choice. You have less control of the HTML content in this case, because it's generated. If you want to use Tailwind here, you'd need to make liberal use of Tailwind's @apply directive for basic declarations, which IMO is not the best expression of Tailwind usage. On the other hand, you have a lot of control over the CSS. It makes more sense to write the CSS directly. Now consider an organization with many separate web properties, which all require consistent branding. The organization has a UI guy who creates universal stylesheets and components for use across sites. Here you have less control over the CSS, and more over the HTML. Tailwind makes more sense. You can add all the utility classes to HTML that you want, with few overrides or other enterprise pull-ups. This latter scenario also highlights one of Tailwind's strengths. Tailwind limits your options. If you need to keep a brand consistent across a large number of properties, Tailwind keeps you in the guardrails of the style guide. I can't be the only one who's worked at an organization where there's supposed to be only one shade of blue to represent the brand, but you wind up finding 160 different shades of blue throughout the CSS. Anyway, Tailwind has its time and place. I love it when it fits.

ceiphr 5y ago

I love the little Cyberpunk theme example.

swyx 5y ago

Other tailwind component libraries I track: - https://github.com/thedevdojo/tails https://github.com/thedevdojo/tails - http://tailwindcomponents.com/ http://tailwindcomponents.com/ - https://tailwindui.com/components https://tailwindui.com/components - https://merakiui.com/ https://merakiui.com/ - https://www.gustui.com/ https://www.gustui.com/ - https://mertjf.github.io/tailblocks/ https://mertjf.github.io/tailblocks/ - https://shuffle.dev/ https://shuffle.dev/ Tailwind visual builder (from my resources list https://github.com/sw-yx/spark-joy/ https://github.com/sw-yx/spark-joy/)