Tailwind Is a Leaky Abstraction

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

Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • styled-system

    ⬢ Style props for rapid UI development

    I find css-as-props is better than a huge string of classes, as it much more readable and statically analyzable. I wonder if anyone is working on a successor to styled-system (though it works fine).

    [1] https://styled-system.com/

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    > their pay-for-documentation model

    Yikers this comment sets the stage for a real bad game of phone tag! I think you're mistaking TailwindUI[0], the set of proprietary UI component cheat codes based on top of TailwindCSS, with TailwindCSS[1], the actual CSS library being discussed here.

    [0] https://tailwindui.com/

    [1] https://tailwindcss.com/

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • mantine

    React components library with native dark theme support

    I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read.

    Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all.

    [0] https://mantine.dev

    [1] https://emotion.sh/docs/introduction

    [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

  • open-props

    CSS custom properties to help accelerate adaptive and consistent design.

    Not much.

    Tailwind's @apply just lets you apply Tailwind design tokens to CSS classes. It's useful for keeping designs looking consistent if you're already heavily invested in Tailwind.

    This is probably not something you need to worry about unless you're working at a very large organization with many teams and web properties.

    And there are other CSS-native ways of doing this without Tailwind too. Open Props is a good example (https://open-props.style/).

  • unocss

    The instant on-demand atomic CSS engine.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

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