Free Open Source Tailwind CSS Components

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

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • JetBrains - Developer Ecosystem Survey 2022
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • daisyui

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

    Looks great! Another Tailwind based component library I love is DaisyUI: https://daisyui.com/

  • tailblocks

    Ready-to-use Tailwind CSS blocks.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • tailwindcss-forms

    I have been using tailwind. One thing I've noticed is that it can become unmaintainable compared to styled-components since you just have divs with classes (and it's hard to read 50 nested divs).

    Has anyone used something like Tailwind-Styled-Component [1] and found it worthwhile?

    https://www.npmjs.com/package/tailwind-styled-components

    Also, wow. through this package I learned about: https://github.com/tailwindlabs/tailwindcss-forms which is quite exciting.

  • twin.macro

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

    I've been using twin.macro on a side-project of mine, and have really enjoyed it: https://github.com/ben-rogerson/twin.macro

    I especially like how easy it is to fall back onto ordinary Styled Components if I'm trying to implement more specific.

    Here's a sample of what I've implemented with twin.macro: https://grueplan.com

  • use-utility-classes

    A hook for making classNames more reactive

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