Don't use Tailwind for your Design System

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

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

    A utility-first CSS framework for rapid UI development.

    I think they are gripes from trying to combine the bottom-up approach of Tailwind with the top-down approach of props based styling that JS component libraries typically allows. His point being that Tailwind does not work too well with such solutions for dynamism / contextual style overrides. You could solve it with using clsx or cva though, as seen in this video: "Tru Narla: Building a design system in Next.js with Tailwind" https://www.youtube.com/watch?v=T-Zv73yZ_QI

    The best way seems to be making styling a completely internal component concern, and not take in style props but simply semantic props like isActive=true like NavItem.js on the Tailwind home page suggests: https://tailwindcss.com/#component-driven

    This practise is elaborated in this example has the same button styled differently by passing in different semantic props: https://youtu.be/T-Zv73yZ_QI?t=570

  • vanilla-extract

    Zero-runtime Stylesheets-in-TypeScript

    At that point, you've just reinvented CSS classes.

    These days I recommend learning CSS really well and then using Vanilla Extract (https://vanilla-extract.style), a CSS in TypeScript library that compiles down to raw CSS, basically using TS as your preprocessor instead of SCSS. For dynamic styles, they have an optional small runtime.

    Impressive that OP still is using ReasonReact, I thought it was all but dead after ReScript.

  • 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.

  • classnames

    A simple javascript utility for conditionally joining classNames together

    I like to use a library called classnames. It lets you define dynamically-applied classes in a much more readable way.

    https://www.npmjs.com/package/classnames

  • Civet

    A TypeScript superset that favors more types and less typing

  • clb

    clb is a small, utility function that builds a class list based on a simple api.

    You can even go further and use https://github.com/crswll/clb and create your own rebassjs.

  • daisyui

    🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library

    Instead, consider using DaisyUI[0] as a design system, which is built above TailwindCSS. As a bonus, it's just styles, so it works with any JavaScript system (or none).

    0: https://daisyui.com/

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