Open Source Tailwind CSS Components

I wrote earlier about the comparison between tailwind and bootstrap and in it I talked about how Tailwind lacked a formal component library for common UI elements. Fans of the Tailwind love its speed, simplicity, and powerful building capabilities. Critics arent a fan of its bloated HTML design and component-less delivery. To alleviate some of those concerns, I thought I would comprise a list of open source (and totally free) components for Tailwind.

Tailblocks

Source: Tailblocks

• Github
• Live Example

Tailblocks is a project that provides multiple components that were built using tailwind css. Its not a direct dependency that you have to add to your project, rather it provides the html scaffolding for you to use in order to add the components. Simply find a block you want to use, pick your accent color, pick if you want it to be dark mode or not, and copy/paste the generated html. Superuseful!

Meraki UI Components

Meraki is a collection of 51 Tailwind Css components that support RTL languages and are fully responsive based on Flexbox and CSS grid. Everything from their cards to the sidebars lookawesome!

• Github
• Live Example

Tailwind StarterKit

Tailwind Starter Kit is Free and Open Source set of 120 fully coded css elements. On top of that it has 4 sample pages to make getting started even easier. They do also have some dynamic components that require Javascript to get started. They are one of the few to fully support Angular, Vue, HTML, andReact!

• Github
• Live Example

Overall you can see that there are a number of open source options of there to help you get started using Tailwind. It requires a little bit more friction than Bootstrap that ships with a lot of these basic components, but it also gives you the ability to find what component style you reallylike.

What are some of the Tailwind CSS libraries that you find useful? Comment them below