I Don't Like Tailwind CSS

• styled-jsx

  23 7,610 2.1 JavaScript

  Full CSS support for JSX without compromises

  

And so, his recommendation is to use styled-jsx which is pretty much abandoned (despite of what they say) [1] and not even themselves are using it [2]

[1] https://github.com/vercel/styled-jsx/issues/688

• virtual-event-starter-kit

  6 2,118 0.0 TypeScript

  Open source demo that Next.js developers can clone, deploy, and fully customize for events.

  

[2] https://github.com/vercel/virtual-event-starter-kit/tree/mai...

I do think css-in-js solutions are good, but also they're a lot more work, and probably better suited for large teams with a shared design system, etc, etc.

Personally, I think Tailwind is great. But I understand some people don't like it and cannot appreciate it because it might not look good seeing many classes and "but this is just inline styles". Ok, not for you. It is still great for some other people.

• SurveyJS

  surveyjs.io sponsored

  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.

  

• class-types.macro

  3 7 0.0 TypeScript

The only thing I really didn't like about tailwind was the danger of changing tailwind.config and the long className lists. I "solved" both of those issues with a simple macro and PostCSS plugin: https://github.com/fleck/class-types.macro#why-use-this-libr...

• craco

  32 7,361 6.4 TypeScript

  Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

  

Not sure what your setup is, but I'm using tailwind with create-react-app and craco[1], and the changes show up without needing to reload.

[1] https://github.com/gsoft-inc/craco

• eslint-plugin-tailwind

  1 101 0.0 JavaScript

  ESLint rules for Tailwind CSS

> my VSCode autoformats the classes to break lines just fine.

My only pain point with Tailwind was the order of classes. It helps with readability if the classes are always in the same order. I just discovered that eslint-plugin-tailwind [0] is solving this exactly. Configuring VSCode to run code formatter and perform ESLint fixes [1] is just an incredible DX from the future.

[0] https://github.com/Idered/eslint-plugin-tailwind

[1] ```

• headlessui

  180 24,217 9.1 TypeScript

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

  

I’m in this boat and would also love to hear what people are doing. I checked out the Tailwind companion component library, Headless UI (https://headlessui.dev/) but it seems like very early days indeed.

Suggest a related project