DEV Community

Cover image for Top resources for Tailwind CSS for 2023
Roktim Kamal Senapoty
Roktim Kamal Senapoty

Posted on • Edited on

Top resources for Tailwind CSS for 2023

Tailwind CSS is a utility-first CSS framework πŸ”§ that assists developers in more easily designing and styling websites or applications πŸ’». It offers a library of pre-made styles or "utility classes" πŸ“š that may be used to quickly construct custom interfaces without having to write CSS from scratch πŸš€. These utility classes represent unique stylistic rules, such as "text-center" for text centering βš–οΈ or "p-4" for padding an element πŸ“. Engineers can quickly and efficiently design complicated styles by mixing these classes. Tailwind CSS strives to make interface design more accessible and uniform 🌐, while also being responsive and simple to use βœ”οΈ.

Here are some free resources that provide pre-made components πŸ†“:

Here we go

1. Flowbite

Flowbite is a website that offers a collection of pre-made HTML templates, components, and UI kits for building websites and web applications. It is designed to help web developers and designers save time and effort by providing ready-to-use, customizable building blocks that can be easily integrated into their projects.

Flowbite

2. Cruip Free Components

Cruip is a website that offers a collection of free HTML and React components for building websites and web applications. It is designed to help web developers and designers save time and effort by providing ready-to-use, customizable building blocks that can be easily integrated into their projects.

Cruip Free Components

3. Daisy UI

Daisy UI is a free and open-source component library for the Vue.js framework, designed to help developers build user interfaces quickly and easily. It provides a set of customizable, lightweight, and responsive components that can be easily integrated into Vue.js projects.

Daisy UI

4. Components Collection

The Components Collection is a GitHub repository that provides a large collection of Tailwind CSS components, including many rare-to-find ones that are not available in other popular component libraries.

Components Collection

5. HyperUI

HyperUI is a free and open-source component library for building user interfaces with Tailwind CSS. It provides a collection of ready-to-use components, layouts, and templates that can be easily customized and integrated into any web project.

HyperUI

6. Tail-Kit

Tail-Kit is a commercial UI kit and template collection for building web applications and websites with Tailwind CSS. It provides a variety of pre-built templates, 250 components, and design elements that can be easily customized and integrated into any project.

Tail-Kit

7. Tailwind Components

Tailwind Components is a website that offers a collection of free and premium Tailwind CSS components and templates for building web applications and websites. It provides a variety of ready-to-use components, such as navigation menus, forms, modals, and more, all designed to be visually appealing and responsive.

Tailwind Components

8. Tailblocks

Tailblocks is a free and open-source collection of pre-designed HTML/CSS blocks or components that can be easily integrated into web projects. It is built with Tailwind CSS, a popular utility-first CSS framework, and provides a range of responsive and customizable blocks that can be used to create web pages and interfaces quickly.

Tailblocks

9. Float UI

Float UI is a commercial UI kit and design system for building web applications and websites with Tailwind CSS. It provides a range of customizable and responsive components, templates, and design elements that can be easily integrated into any project.

Float UI

10. Tailwind Awesome

Tailwind Awesome is a website that provides a curated collection of resources, tools, and components for working with Tailwind CSS. It is designed to help developers and designers discover and learn about the latest trends and best practices in the Tailwind CSS community.

Tailwind Awesome

11. Radix UI

Radix UI is a free and open-source collection of components for building user interfaces. It provides a range of highly customizable and accessible components that can be easily integrated into web projects.

Radix UI

12. Sailboat UI

Sailboat UI is a UI kit and design system for building web applications and websites with Tailwind CSS. It provides a range of customizable and responsive components, templates, and design elements that can be easily integrated into any project.

Sailboat UI


Those were the resources for developers πŸ’» and designers 🎨 who want to build high-quality web applications 🌐 and websites πŸ–₯️ quickly ⏩ and efficiently ♻️, while also ensuring that their projects are visually appealing 😍 and accessible . πŸ”₯ Follow for more...

Top comments (19)

Collapse
 
windui profile image
Wind UI

Awesome post mate, congrats!

I would also like to introduce you to our own tailwind library: Wind-UI (wind-ui.com/). Wind-UI focuses on stylish, accessible, and free UI components that you can just copy & paste on any tailwindcss project.

Your review would be invaluable, and if Wind-UI resonates with you, I'd be thrilled to see it as part of your highlighted libraries.

cheers

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Thank You!! I will surely check and mention it after using it!

Cheers

Collapse
 
patzi275 profile image
Patrick Zocli

Thank you. It’s very useful.

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Welcome Patrick

Collapse
 
goldenekpendu profile image
goldenekpendu

Thank you

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Welcome

Collapse
 
rojblake1978 profile image
rojblake1978

Thank you for this post..

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Welcome

Collapse
 
zoltanszogyenyi profile image
ZoltΓ‘n SzΕ‘gyΓ©nyi

As one of the maintainers from Flowbite - thank you for including us!

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

And Thank You for the awsome work that you guys are doing!

Collapse
 
windyaaa profile image
Windya Madushani

Great article.

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Thank You

Collapse
 
anjapcodes profile image
Anja Petry

What a great list! πŸ”₯ Thank you, Roktim.
Allow me to add this brand new component library to the list: tailgrids.com/react

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

I will surely add it πŸ’―Thanks!!

Collapse
 
kameamea133 profile image
kameamea133

Thanks πŸ’ͺπŸ‘

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Welcome

Collapse
 
denys_dev profile image
denkochev

Thank you so much for this materials.

Collapse
 
roktim32 profile image
Roktim Kamal Senapoty

Welcome

Collapse
 
easetemplates profile image
easetemplates

Thanks for such an amazing collection for TailwindCSS UI.

If you could add Dash UI to your outstanding list, we would be grateful to you.

Your Feedback Is Precious To Us!