Tailwind CSS v3.0

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • pollen

    The CSS variables build system (by heybokeh)

  • 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

  • tachyons

    Functional css for humans

  • 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/

  • 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.

    SurveyJS logo
  • vanilla-extract

    Zero-runtime Stylesheets-in-TypeScript

  • 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.

  • daisyui

    ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • 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....

  • Next.js

    The React Framework

  • 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-...

  • tail-kit

    Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 3.0.

  • 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.

  • 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.

    InfluxDB logo
  • tailblocks

    Ready-to-use Tailwind CSS blocks.

  • 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.

  • merakiui

    Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode ๐Ÿš€ โ˜„๏ธ.

  • 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.

  • unocss

    The instant on-demand atomic CSS engine.

  • Seems surprising that no one has mentioned UnoCSS - the big umbrella of atomic CSS frameworks yet.

    https://github.com/antfu/unocss

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts