Awesome Tailwind CSS

       

A curated list of awesome tools, components, templates, and resources for Tailwind CSS.

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. This list highlights the best tools, extensions, UI kits, and learning resources to help developers get the most out of Tailwind.

Contents

• Official Resources
• UI Kits & Component Libraries
• Templates & Starters
• Plugins & Extensions
• Tools
• VS Code Extensions
• Animations & Transitions
• Learning Resources
• Design Tools & Figma
• Projects Using Tailwind
• Related Awesome Lists

Official Resources

• Tailwind CSS Website – Official documentation and guides.
• Tailwind UI – Premium UI components by the creators of Tailwind CSS.
• Headless UI – Unstyled accessible UI components for React and Vue.

UI Kits & Component Libraries

• DaisyUI – Tailwind plugin that adds component classes like buttons, cards, etc.
• Flowbite – Open-source component library with interactive elements.
• Meraki UI – Beautiful UI components built with Tailwind CSS.
• Tailwind Elements – Bootstrap-style components built with Tailwind.
• Kometa UI Kit – Responsive blocks and components for marketing websites.

Templates & Starters

• Tailwind Toolbox – Free templates and starter kits.
• Cruip – Premium Tailwind landing page templates.
• Treact – Free React templates using Tailwind CSS.
• HTMLrev – Collection of free templates for Tailwind and Bootstrap.

Plugins & Extensions

• @tailwindcss/typography – Adds beautiful typography utilities (aka "prose" class).
• @tailwindcss/forms – Better base styles for form elements.
• @tailwindcss/aspect-ratio – Adds utilities for controlling aspect ratios.
• @tailwindcss/line-clamp – Truncate text to a fixed number of lines.

Tools

• Tailwind Play – Online Tailwind CSS playground.
• Tailwind Config Viewer – Visualize your Tailwind config file.
• Hypercolor – Collection of gradients built with Tailwind classes.
• Tailwind Shades – Generate Tailwind color shades.
• UI Colors – Create color palettes compatible with Tailwind CSS.

VS Code Extensions

• Tailwind CSS IntelliSense – Intelligent autocomplete and hover preview.
• Headwind – Sort Tailwind classes automatically.

Animations & Transitions

• Tailwind CSS Animations – Reusable animation utilities.
• Animista – Generate animation classes you can use with Tailwind.
• Motion One – Lightweight animation library for React apps styled with Tailwind.

Learning Resources

• Tailwind CSS Documentation – The official reference.
• Tailwind CSS From Scratch (YouTube) – Video tutorial by Traversy Media.
• Build UI with Tailwind (Scrimba) – Interactive Tailwind CSS course.
• The Net Ninja’s Tailwind Tutorial – Beginner-friendly YouTube playlist.

Design Tools & Figma

• Tailwind UI Figma Kit – Official Figma files for Tailwind UI.
• Figma Tailwind CSS Plugin – Map Figma designs to Tailwind classes.
• FlowBite Figma UI Kit – Design library aligned with Flowbite components.

Projects Using Tailwind

• Laravel Breeze – Laravel starter kit using Tailwind CSS.
• Next.js + Tailwind Starter – Vercel’s official Next.js + Tailwind example.
• Astro Theme: Starlight – Astro docs theme built with Tailwind CSS.

Related Awesome Lists

• Awesome CSS – Styles and utilities for front-end development.
• Awesome HTML5 – Semantic markup and elements.
• Awesome Frontend Development – Tools and resources for modern front-end development.

Contribute

Contributions are welcome!

License