Tailwind CSS is definetly the CSS framework you should keep an eye on ! This utility-first framework has been created for rapidly building custom UI components. Since its launch in 2017, Tailwind CSS has gotten more and more popular. The proof of this growing success ? Tailwind CSS has been ranked #1 at the State of CSS report for the past two years (2020 and 2021). This ranking is based on satisfaction, interest, usage, and awareness in the developers community.
Tailwind’s syntax gives an incredible development speed to the developer. If Tailwind CSS is often the good choice to get the work done effectively and quickly, its learning curve can be a bit steep for novice developers.
So for those in lack of time or inspiration Tailwind CSS component libraries and collections are there to help you ! Their components are fully responsive and page templates allow you to copy and paste HTML snippets directly into your codebase to use or modify. Built by other developers and organizations, these collections allow you to get started on your project quickly by seeing the potential outcome.
Some of these collections are totally free and others offer free and premium components. Here is the list of the best 2021 Tailwind CSS component libraries that worth your attention. Enjoy !
1- Tailwind UI
Probably the most know collection of Tailwind CSS components which is made by the makers of Tailwind CSS. You will find over 400+ basic components in React, Vue and HTML organized in 3 main categories : Marketing, Application UI and Ecommerce, to fit to your project. No Javascript included.
PREMIUM CONTENT and few free components.
2- Fancy Tailwind
This one is really new. Created by a single frontend developer Fancy Tailwind has been released in August of 2021 and stands out from the rest of Tailwind CSS collections because it offers really cool components with animations and effects (Javascript included).
No other Tailwind CSS collections offers that !
For now the collection is over 1000+ components (made in React) and its owner announce that he will add new categories and components every 2-3 weeks.
PREMIUM CONTENT and around 20% of the components are free (Early access discount available for premium access).
3- Tailblocks
Tailblocks is a collection of 60+ minimalist layout blocks which are used as starters and can be easily customized. You will find multiple categories like testimonial, team, steps, statistics, pricing, hero, header, gallery, footer, feature, and ecommerce. The Tailblocks components are cool because you can switch them to dark mode and also change the primary colors from the interface.
TOTALLY FREE collection !
4- Tailwind Components
Tailwind Components is an open source Tailwind CSS components and templates collection that will help you to bootstrap your new apps, projects or landing sites. The components are essentially made and shared by the community. The amount of components is not that large but you could find some gems hidden in there.
TOTALLY FREE collection !
5- Meraki UI
Meraki UI is a small collection of beautiful Tailwind CSS components that supports right-to-left (RTL) languages. This means that if a user’s default browser language is set to an RTL language, Meraki UI will reverse everything, including text, scroll, progress indicators, buttons, etc.
TOTALLY FREE collection !
6- Daisy UI
Daidy UI is an npm package that can be viewed as a Bootstrap of Tailwind CSS. It is basically a layer to Tailwind CSS with premade classes that give you access to Daisy UI collections of nice made components. You will find a lot of components that could fit to your projects even though some of you will prefer to have a hand on all the utility classes of Tailwind CSS.
TOTALLY FREE collection ! Need an npm installation.
7- Tailwind toolbox
Tailwind toolbox is another open source, community-contributed collections of Tailwind CSS components. However Tailwind toolbox is focused on starters rather than single unit components. You will find there more than 45 starters and 18 components.
TOTALLY FREE collection !
8- TUK
Tailwind UI Kit (TUK) is with Tailwind UI the biggest collection of Tailwind CSS components. They have over 1000+ components accesible in React, Angular and Vue, and organized in various categories (Marketing, Application UI and Ecommerce). Like Tailwind UI there is no interaction with the components and you will have to add your own Javascript recipes.
PREMIUM CONTENT and free components (subscription needed to access free components).
9- Lofi UI
Lofi UI is a small but well done set of Tailwind CSS components (40 components). The components are structured to be reusable and have minimal styles, so you can add your own and customize your designs to suit your personal taste.
TOTALLY FREE collection !
10- Wicked Blocks
Wicked Blocks is the last collection of Tailwind CSS UI components that I will present you. It is a really nice collection of 120+ unique component designs, including alerts, modals, cards, forms, navigation, and footers.
TOTALLY FREE collection !
Conclusion
THAT'S IT GUYS !
I hope this list will help you. With these collections of components and templates, you will be able to easily style your Tailwind CSS projects. So take the time to explore them !
Top comments (1)
very helpful blog! thank you ❤️