Goodbye CSS Modules, Hello TailwindCSS

1. Tailwind CSS

   1 1,524 89,844 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. Sevalla

   sevalla.com featured

   Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

   

3. compiled

   2 16 2,019 8.5 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 52 12,159 5.9 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 357 39,605 9.9 TypeScript

   Chakra UI is a component system for building SaaS 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 200 27,857 8.5 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 8,020 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 605 103,502 6.8 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. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

10. windicss

    8 10 6,548 0.0 TypeScript

    Next generation utility-first CSS framework.

    

Suggest a related project