Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
daisyui
๐ผ ๐ผ ๐ผ ๐ผ ๐ผ โThe most popular, free and open-source Tailwind CSS component library
-
tail-kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 3.0.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
merakiui
Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode ๐ โ๏ธ.
I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following:
1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color variables.
2. Some of the utility classes are very helpful. Even as someone who likes writing CSS, it's nice to not need to give something a custom classname just because I want to put margin-top on it. class="mt-4", done.
I think the problem is Tailwind goes too far and tries to replace EVERYTHING with a stack of utility classes.
This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore.
Personally I think the best parts of Tailwind are captured in Pollen[1], but I do wish it came with a subset of utility classes for colors, font sizes, margin, padding, and text alignment. I think the hard part is defining which subset is the right subset... I doubt you could find strong agreement from a large majority of developers on that.
1. https://www.pollen.style
Tailwind always looks like a cool evolution of Tachyons [0] to me (with a build step). On the other hand, tachyons is really simple, you just drop it into your project with no build required (or drop the sass in), and I've never really felt like it was missing any features I wanted.
Has anyone used both seriously who can compare?
[0]: https://tachyons.io/
I'm in the same boat. Started using (Vanilla Extract)[https://vanilla-extract.style] earlier this year and it's the best CSS setup I've ever worked with.
Looks like TW 2.2 from June. It wasn't in the initial JIT release in 2.1.
https://github.com/tailwindlabs/tailwindcss/releases/tag/v2....
I've always been a bit apprehensive of Tailwind but with the latest JIT compiler it actually seems usable. I'm happy to see it getting more use for mainstream applications but I wish it wasn't the "default" for a lot of open source projects.
For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people. The problem I find is that it adds opinion and mental overhead for people learning related technologies or trying to get a head start without an opinionated styling solution. In order to use something like the blog-starter example for next.js I have to go and learn tailwind and then come back before I can use their blog starter, where as CSS is universal. CSS works with every project, without depending on Tailwind.
Anyway, looking forward to seeing newer improvements to Tailwind, but I hope that people will consider it an alternative to something like Bootstrap instead of an alternative to CSS.
[1] https://github.com/vercel/next.js/tree/canary/examples/blog-...
My favorite thing about Tailwind is all the sites that offer copy-and-paste components, ready to use. Sure, you can pay for TailwindUI, but you can also just browse components from e.g.
* https://tailblocks.cc
* https://blocks.wickedtemplates.com
* https://tailwindcomponents.com/
* https://merakiui.com/
* https://www.tailwind-kit.com/
* https://www.tailwindtoolbox.com/
Most of the sites I put together this year used an amalgamation of components from those sites for basic structure, and then just get customized to the brand. I hate writing raw CSS and I would also hate writing raw Tailwind.
My favorite thing about Tailwind is all the sites that offer copy-and-paste components, ready to use. Sure, you can pay for TailwindUI, but you can also just browse components from e.g.
* https://tailblocks.cc
* https://blocks.wickedtemplates.com
* https://tailwindcomponents.com/
* https://merakiui.com/
* https://www.tailwind-kit.com/
* https://www.tailwindtoolbox.com/
Most of the sites I put together this year used an amalgamation of components from those sites for basic structure, and then just get customized to the brand. I hate writing raw CSS and I would also hate writing raw Tailwind.
My favorite thing about Tailwind is all the sites that offer copy-and-paste components, ready to use. Sure, you can pay for TailwindUI, but you can also just browse components from e.g.
* https://tailblocks.cc
* https://blocks.wickedtemplates.com
* https://tailwindcomponents.com/
* https://merakiui.com/
* https://www.tailwind-kit.com/
* https://www.tailwindtoolbox.com/
Most of the sites I put together this year used an amalgamation of components from those sites for basic structure, and then just get customized to the brand. I hate writing raw CSS and I would also hate writing raw Tailwind.
Seems surprising that no one has mentioned UnoCSS - the big umbrella of atomic CSS frameworks yet.
https://github.com/antfu/unocss