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
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)