DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Open Source Tailwind CSS Components
Joseph Maurer
Joseph Maurer

Posted on • Originally published at josephamaurer.Medium

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 aren’t 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

Tailblocks is a project that provides multiple components that were built using tailwind css. It’s 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. SuperΒ useful!

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 lookΒ awesome!

Tailwind StarterΒ Kit

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, andΒ React!

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 reallyΒ like.

What are some of the Tailwind CSS libraries that you find useful? Comment them belowΒ πŸ‘

Top comments (0)

🌚 Life is too short to browse without dark mode