What working with Tailwind CSS every day for 2 years looks like

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
  • open-props

    CSS custom properties to help accelerate adaptive and consistent design.

    I haven’t seen it mentioned in this thread but for those who like Tailwind in theory but hate all it’s drawbacks you might be interested in Open Props (https://open-props.style/) which is put together by a member of Chrome’s devrel team.

    The first 10 minutes or so of this video is also a decent introduction it seems which will help put this project into context for you so you can see specifically what kinds of problems it solves in a way that Tailwind doesn’t and vice versa. https://youtu.be/O53MwmolKP4

  • vanilla-extract

    Zero-runtime Stylesheets-in-TypeScript

    Personally I use Vanilla-Extract, it's like SCSS but uses TypeScript instead of the SCSS language. It also compiles down into native CSS, so there's no runtime overhead like styled-components, emotion, etc.

    https://vanilla-extract.style

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

  • tw-classed

    interesting take! I started using tailwind with the classnames library early on and found it to be a really nice fit for my purposes. Also very interested in more tailwind-specific tools like tw-classed[1]

    [1]: https://tw-classed.vercel.app/

  • Bulma

    Modern CSS framework based on Flexbox

    Yeah, I used Bootstrap for a long time, and got used to how it works.

    I wanted to like Tailwind, but it seems a bit disingenuous. It's like using inline style tags, just with shorter names.

    From time to time I've made an effort to learn how CSS works, but after a while I forget the details. It's more productive if I can browse a catalogue of visual examples, with concise markup that is easy to copy and paste.

    Bulma seems like the more "modern" take on Bootstrap: https://bulma.io/

  • garden

    Generate CSS with Clojure (by noprompt)

    Thanks for the vanilla-extract recommendation, I'll be using this!

    In my case, tailwind was useful for providing a handy set of vocabularies for simple and common stylings. But once customizations start to pile on, we're back into SCSS. Using 2 systems at once meant additionally gluing them with the postcss toolchain, so effectively we have 3 preprocessors running for every style refresh.

    Looking in at TypeScript from the clojurescript ecosystem though, I'm still yet to see an equal to https://github.com/noprompt/garden or https://github.com/Jarzka/stylefy: single language, excellent composability, compile-time anonymous class names, inline styles... almost like they solved CSS (except for typing)

  • stylefy

    Clojure(Script) library for styling user interface components with ease.

    Thanks for the vanilla-extract recommendation, I'll be using this!

    In my case, tailwind was useful for providing a handy set of vocabularies for simple and common stylings. But once customizations start to pile on, we're back into SCSS. Using 2 systems at once meant additionally gluing them with the postcss toolchain, so effectively we have 3 preprocessors running for every style refresh.

    Looking in at TypeScript from the clojurescript ecosystem though, I'm still yet to see an equal to https://github.com/noprompt/garden or https://github.com/Jarzka/stylefy: single language, excellent composability, compile-time anonymous class names, inline styles... almost like they solved CSS (except for typing)

  • truss

    A TypeScript DSL for writing utility CSS in React/JSX (by homebound-team)

    Fwiw to the avoid 80%-in-TW / 20%-in-SCSS-or-something-else dichotomy/complexity, we built Truss which brings TW (Tachyons) style abbreviations to the existing "something else" tool chain (Emotion in our case).

    So then everything goes through a single system.

    https://github.com/homebound-team/truss

    > tailwind's and SCSS's VS code integration is pretty amazing

    We get that too, by being just vanilla TypeScript, no editor-specific integration necessary. :-D

    (I've linked to Truss in another response, so will stop now. :-))

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

  • stitches

    [Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

    By having a style guide with variants, StitchesJS pioneered this but there are others like Vanilla-Extract.

    https://stitches.dev/

  • normalize.css

    A modern alternative to CSS resets

    This might be helpful.

    https://necolas.github.io/normalize.css/

    Design decisions, though, are ultimately up to your taste and judgement.

  • unocss

    The instant on-demand atomic CSS engine.

    Haven't seen it mentioned, but if you like Tailwind, maybe take a look at UnoCSS: https://github.com/unocss/unocss

    It is like the next evolution of Tailwind. See this blog post for full explanation: https://antfu.me/posts/reimagine-atomic-css

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