https://github.com/awesomelistsio/awesome-tailwindcss
A curated list of awesome tools, components, templates, and resources for Tailwind CSS.
https://github.com/awesomelistsio/awesome-tailwindcss
List: awesome-tailwindcss
awesome awesome-list awesome-lists css tailwind-css tailwindcss web-design web-development webdesign webdev webdevelopment
Last synced: 2 months ago
JSON representation
A curated list of awesome tools, components, templates, and resources for Tailwind CSS.
- Host: GitHub
- URL: https://github.com/awesomelistsio/awesome-tailwindcss
- Owner: awesomelistsio
- Created: 2025-08-02T23:20:18.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-08-02T23:26:39.000Z (2 months ago)
- Last Synced: 2025-08-03T01:13:37.807Z (2 months ago)
- Topics: awesome, awesome-list, awesome-lists, css, tailwind-css, tailwindcss, web-design, web-development, webdesign, webdev, webdevelopment
- Language: Python
- Homepage: https://awesome.himpfen.com/
- Size: 8.79 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- ultimate-awesome - awesome-tailwindcss - A curated list of awesome tools, components, templates, and resources for Tailwind CSS. (Other Lists / TeX Lists)
README
# Awesome Tailwind CSS [](https://github.com/awesomelistsio/awesome)
[](https://ko-fi.com/awesomelists) [](https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ) [](https://tinyurl.com/e8ymxdw3) [](https://x.com/ListsAwesome) [](https://www.facebook.com/awesomelists)
> 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](#official-resources)
- [UI Kits & Component Libraries](#ui-kits--component-libraries)
- [Templates & Starters](#templates--starters)
- [Plugins & Extensions](#plugins--extensions)
- [Tools](#tools)
- [VS Code Extensions](#vs-code-extensions)
- [Animations & Transitions](#animations--transitions)
- [Learning Resources](#learning-resources)
- [Design Tools & Figma](#design-tools--figma)
- [Projects Using Tailwind](#projects-using-tailwind)
- [Related Awesome Lists](#related-awesome-lists)
## Official Resources
- [Tailwind CSS Website](https://tailwindcss.com/) – Official documentation and guides.
- [Tailwind UI](https://tailwindui.com/) – Premium UI components by the creators of Tailwind CSS.
- [Headless UI](https://headlessui.com/) – Unstyled accessible UI components for React and Vue.
## UI Kits & Component Libraries
- [DaisyUI](https://daisyui.com/) – Tailwind plugin that adds component classes like buttons, cards, etc.
- [Flowbite](https://flowbite.com/) – Open-source component library with interactive elements.
- [Meraki UI](https://merakiui.com/) – Beautiful UI components built with Tailwind CSS.
- [Tailwind Elements](https://tailwind-elements.com/) – Bootstrap-style components built with Tailwind.
- [Kometa UI Kit](https://kitwind.io/products/kometa) – Responsive blocks and components for marketing websites.
## Templates & Starters
- [Tailwind Toolbox](https://www.tailwindtoolbox.com/) – Free templates and starter kits.
- [Cruip](https://cruip.com/) – Premium Tailwind landing page templates.
- [Treact](https://treact.owaiskhan.me/) – Free React templates using Tailwind CSS.
- [HTMLrev](https://htmlrev.com/) – Collection of free templates for Tailwind and Bootstrap.
## Plugins & Extensions
- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography) – Adds beautiful typography utilities (aka "prose" class).
- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) – Better base styles for form elements.
- [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) – Adds utilities for controlling aspect ratios.
- [@tailwindcss/line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp) – Truncate text to a fixed number of lines.
## Tools
- [Tailwind Play](https://play.tailwindcss.com/) – Online Tailwind CSS playground.
- [Tailwind Config Viewer](https://tailwind-config-viewer.vercel.app/) – Visualize your Tailwind config file.
- [Hypercolor](https://hypercolor.dev/) – Collection of gradients built with Tailwind classes.
- [Tailwind Shades](https://tailwindshades.com/) – Generate Tailwind color shades.
- [UI Colors](https://uicolors.app/create) – Create color palettes compatible with Tailwind CSS.
## VS Code Extensions
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) – Intelligent autocomplete and hover preview.
- [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) – Sort Tailwind classes automatically.
## Animations & Transitions
- [Tailwind CSS Animations](https://github.com/benface/tailwindcss-animations) – Reusable animation utilities.
- [Animista](https://animista.net/) – Generate animation classes you can use with Tailwind.
- [Motion One](https://motion.dev/) – Lightweight animation library for React apps styled with Tailwind.
## Learning Resources
- [Tailwind CSS Documentation](https://tailwindcss.com/docs) – The official reference.
- [Tailwind CSS From Scratch (YouTube)](https://www.youtube.com/watch?v=dFgzHOX84xQ) – Video tutorial by Traversy Media.
- [Build UI with Tailwind (Scrimba)](https://scrimba.com/learn/tailwind) – Interactive Tailwind CSS course.
- [The Net Ninja’s Tailwind Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ) – Beginner-friendly YouTube playlist.
## Design Tools & Figma
- [Tailwind UI Figma Kit](https://tailwindui.com/resources) – Official Figma files for Tailwind UI.
- [Figma Tailwind CSS Plugin](https://www.figma.com/community/plugin/739014140885539349/Tailwind-CSS) – Map Figma designs to Tailwind classes.
- [FlowBite Figma UI Kit](https://flowbite.com/figma/) – Design library aligned with Flowbite components.
## Projects Using Tailwind
- [Laravel Breeze](https://github.com/laravel/breeze) – Laravel starter kit using Tailwind CSS.
- [Next.js + Tailwind Starter](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss) – Vercel’s official Next.js + Tailwind example.
- [Astro Theme: Starlight](https://github.com/withastro/starlight) – Astro docs theme built with Tailwind CSS.
## Related Awesome Lists
- **[Awesome CSS](https://github.com/awesomelistsio/awesome-css)** – Styles and utilities for front-end development.
- **[Awesome HTML5](https://github.com/awesomelistsio/awesome-html5)** – Semantic markup and elements.
- **[Awesome Frontend Development](https://github.com/awesomelistsio/awesome-front-end-development)** – Tools and resources for modern front-end development.
## Contribute
Contributions are welcome!
## License
[](http://creativecommons.org/licenses/by-sa/4.0/)