Forget about styled components. Tailwind CSS is all you need.

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    The solution is a CSS utilities framework, the most popular being Tailwind CSS. This framework gives you CSS classes for all styling rules, such as mb-1, text-sm and sm:w-full. You can prefix states (hover:, active:, etc) and breakpoints (sm:, lg: , etc). See the documentation for more things you can do with Tailwind. The important thing here is that the framework only creates minimal abstractions (e.g. color names and sizes). The component remains the main source of abstraction.

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    There are two ways to apply styling to HTML: the style attribute and using CSS. While the style attribute can only change the style of the element itself, CSS lets you target classes, siblings, children and has additional features like media queries. Using the style attribute is considered an anti-pattern as it allows no abstraction and re-usability. While I think it's true that we shouldn't use the style attribute, I believe the original arguments in favor of CSS - abstraction and re-usability - no longer hold. With the coming of the component era, CSS classes have lost their appeal. Even CSS-in-JS libraries like styled-component and emotion seem to take the wrong approach. But let's back up a little first.

  • SurveyJS

    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.

  • emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    There are two ways to apply styling to HTML: the style attribute and using CSS. While the style attribute can only change the style of the element itself, CSS lets you target classes, siblings, children and has additional features like media queries. Using the style attribute is considered an anti-pattern as it allows no abstraction and re-usability. While I think it's true that we shouldn't use the style attribute, I believe the original arguments in favor of CSS - abstraction and re-usability - no longer hold. With the coming of the component era, CSS classes have lost their appeal. Even CSS-in-JS libraries like styled-component and emotion seem to take the wrong approach. But let's back up a little first.

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