Goodbye CSS Modules, Hello TailwindCSS

1. Tailwind CSS

   1 1,450 84,550 9.8 TypeScript

   A utility-first CSS framework for rapid UI development.

   

   This is changing with v3 that is slated to be released before the end of the year. The JIT compiler for Tailwind is becoming the default now that it has had a year+ to bake in the wild and prove itself as reliable.

   As far as the toolchain goes, meh. Building on PostCSS allowed the Tailwind team a lot of power with minimal complexity and it appears to have paid off for them. The JIT is plenty fast as is now; so fast in fact, that you can now run it in on a CDN build for prototyping/MVP.

   https://github.com/tailwindlabs/tailwindcss/releases/tag/v3....

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. compiled

   2 16 1,998 8.9 TypeScript

   A familiar and performant compile time CSS-in-JS library for React.

   

   Author here, I haven't had time to play around with it, but this library[0] from Atlassian looks like a "best of the both worlds" styling approach: CSS-in-JS authorship without the runtime penalty.

   [0] https://compiledcssinjs.com/

4. linaria

   3 49 11,764 6.1 TypeScript

   Zero-runtime CSS in JS library

   

   > And CSS-in-JS has worse performance because styles aren't compiled to sytlesheets like they're supposed to be, they're applied at runtime.

   That depends on the tool. Libraries like Linaria [1] ("zero-runtime" CSS-in-JS) do generate CSS files.

   [1] https://linaria.dev

5. chakra-ui

   4 352 38,333 9.9 TypeScript

   Chakra UI is a component system for building products with speed ⚡️

   

   If you like the idea of tailwind and don't want to look at utility classes and still want the power of styled-components or react-emotion I'd check out Chakra UI [0].

   [0] https://chakra-ui.com/

6. headlessui

   5 197 26,589 9.0 TypeScript

   Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

   

   I wanted to love Tailwind and I used it on a personal project but I eventually concluded that writing CSS is just faster and easier if you are already comfortable with it. Also, your HTML/JSX becomes such a mess. Yes I know you can extract a bunch of Tailwind rules into a class to avoid repeating yourself and keep the code more readable, but then what's the point?

   However I keep visiting Tailwind's docs once or twice a week cause the site is gorgeous and it gives me ideas for my own projects. Also, TailwindUI is amazing if you are not a graphic designer, I use it a lot.

   https://tailwindui.com (+ https://headlessui.dev)

7. twin.macro

   6 57 7,972 5.9 TypeScript

   🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

   

   Author here, have you looked at twin.macro?

   https://github.com/ben-rogerson/twin.macro

8. create-react-app

   7 597 103,008 2.3 JavaScript

   Set up a modern web app by running one command.

   

   Author here, I am eagerly awaiting the next version of Create React App. I'm hoping the upgraded internals will remove the need for CRACO. Here's a link to CRA v5 on Github:

   https://github.com/facebook/create-react-app/milestone/81?cl...

9. windicss

   8 10 6,535 0.0 TypeScript

   Next generation utility-first CSS framework.

   

Suggest a related project