Tailwind Is a Leaky Abstraction

• styled-system

  11 7,536 0.0 JavaScript

  ⬢ 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

  527 64,458 9.8 HTML

  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

  klo.dev

  sponsored

  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

  105 17,004 10.0 TypeScript

  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

  26 2,907 8.9 HTML

  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

  26 8,684 9.9 TypeScript

  The instant on-demand atomic CSS engine.

  

• Appwrite

  appwrite.io

  sponsored

  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!

  

Suggest a related project