{"id":92561,"url":"https://github.com/brandonhimpfen/awesome-tailwindcss","name":"awesome-tailwindcss","description":"A curated list of awesome tools, components, templates, and resources for Tailwind CSS.","projects_count":40,"last_synced_at":"2026-06-04T09:00:23.302Z","repository":{"id":307911564,"uuid":"1031059860","full_name":"brandonhimpfen/awesome-tailwindcss","owner":"brandonhimpfen","description":"A curated list of awesome tools, components, templates, and resources for Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2026-05-05T16:06:16.000Z","size":29,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-18T01:03:49.150Z","etag":null,"topics":["awesome","awesome-list","awesome-lists","css","tailwind-css","tailwindcss","web-design","web-development","webdesign","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"https://lnktr.net/awesome","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandonhimpfen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"ko_fi":"awesomelists","custom":["https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ"]}},"created_at":"2025-08-02T23:20:18.000Z","updated_at":"2026-05-05T15:40:34.000Z","dependencies_parsed_at":"2026-04-01T08:00:27.031Z","dependency_job_id":null,"html_url":"https://github.com/brandonhimpfen/awesome-tailwindcss","commit_stats":null,"previous_names":["awesomelistsio/awesome-tailwindcss","brandonhimpfen/awesome-tailwindcss"],"tags_count":0,"template":false,"template_full_name":"brandonhimpfen/awesome-lists-template","purl":"pkg:github/brandonhimpfen/awesome-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhimpfen%2Fawesome-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhimpfen%2Fawesome-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhimpfen%2Fawesome-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhimpfen%2Fawesome-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonhimpfen","download_url":"https://codeload.github.com/brandonhimpfen/awesome-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhimpfen%2Fawesome-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33897568,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-04T02:00:06.755Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2025-08-07T01:02:30.003Z","updated_at":"2026-06-04T09:00:23.302Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Official Resources","Animations \u0026 Transitions","License","VS Code Extensions","UI Kits \u0026 Component Libraries","Templates \u0026 Starters","Tools","Design Tools \u0026 Figma","Projects Using Tailwind","Plugins \u0026 Extensions","Related Awesome Lists","Learning Resources"],"sub_categories":[],"readme":"# Awesome Tailwind CSS [![Awesome Lists](https://srv-cdn.himpfen.io/badges/awesome-lists/awesomelists-flat.svg)](https://github.com/awesomelistsio/awesome)\n\n[![DOI](https://zenodo.org/badge/1031059860.svg)](https://doi.org/10.5281/zenodo.19682076)  \n[![GitHub Sponsor](https://srv-cdn.himpfen.io/badges/github/github-flat.svg)](https://github.com/sponsors/brandonhimpfen) \u0026nbsp; \n[![Buy Me a Coffee](https://srv-cdn.himpfen.io/badges/buymeacoffee/buymeacoffee-flat.svg)](https://buymeacoffee.com/brandonhimpfen) \u0026nbsp; \n[![Ko-Fi](https://srv-cdn.himpfen.io/badges/kofi/kofi-flat.svg)](https://ko-fi.com/brandonhimpfen) \u0026nbsp; \n[![PayPal](https://srv-cdn.himpfen.io/badges/paypal/paypal-flat.svg)](https://paypal.me/brandonhimpfen)\n\n📌 This repository is archived with Zenodo and can be cited using the DOI above.\n\n\u003e A curated list of awesome tools, components, templates, and resources for Tailwind CSS.\n\nTailwind 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.\n\n_Support ongoing maintenance and curation via [GitHub Sponsors](https://github.com/sponsors/brandonhimpfen)._\n\n## Contents\n\n- [Official Resources](#official-resources)\n- [UI Kits \u0026 Component Libraries](#ui-kits--component-libraries)\n- [Templates \u0026 Starters](#templates--starters)\n- [Plugins \u0026 Extensions](#plugins--extensions)\n- [Tools](#tools)\n- [VS Code Extensions](#vs-code-extensions)\n- [Animations \u0026 Transitions](#animations--transitions)\n- [Learning Resources](#learning-resources)\n- [Design Tools \u0026 Figma](#design-tools--figma)\n- [Projects Using Tailwind](#projects-using-tailwind)\n- [Related Awesome Lists](#related-awesome-lists)\n\n## Official Resources\n\n- [Tailwind CSS Website](https://tailwindcss.com/) – Official documentation and guides.\n- [Tailwind UI](https://tailwindui.com/) – Premium UI components by the creators of Tailwind CSS.\n- [Headless UI](https://headlessui.com/) – Unstyled accessible UI components for React and Vue.\n\n## UI Kits \u0026 Component Libraries\n\n- [DaisyUI](https://daisyui.com/) – Tailwind plugin that adds component classes like buttons, cards, etc.\n- [Flowbite](https://flowbite.com/) – Open-source component library with interactive elements.\n- [Meraki UI](https://merakiui.com/) – Beautiful UI components built with Tailwind CSS.\n- [Tailwind Elements](https://tailwind-elements.com/) – Bootstrap-style components built with Tailwind.\n- [Kometa UI Kit](https://kitwind.io/products/kometa) – Responsive blocks and components for marketing websites.\n\n## Templates \u0026 Starters\n\n- [Tailwind Toolbox](https://www.tailwindtoolbox.com/) – Free templates and starter kits.\n- [Cruip](https://cruip.com/) – Premium Tailwind landing page templates.\n- [Treact](https://treact.owaiskhan.me/) – Free React templates using Tailwind CSS.\n- [HTMLrev](https://htmlrev.com/) – Collection of free templates for Tailwind and Bootstrap.\n\n## Plugins \u0026 Extensions\n\n- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography) – Adds beautiful typography utilities (aka \"prose\" class).\n- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) – Better base styles for form elements.\n- [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) – Adds utilities for controlling aspect ratios.\n- [@tailwindcss/line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp) – Truncate text to a fixed number of lines.\n\n## Tools\n\n- [Tailwind Play](https://play.tailwindcss.com/) – Online Tailwind CSS playground.\n- [Tailwind Config Viewer](https://tailwind-config-viewer.vercel.app/) – Visualize your Tailwind config file.\n- [Hypercolor](https://hypercolor.dev/) – Collection of gradients built with Tailwind classes.\n- [Tailwind Shades](https://tailwindshades.com/) – Generate Tailwind color shades.\n- [UI Colors](https://uicolors.app/create) – Create color palettes compatible with Tailwind CSS.\n\n## VS Code Extensions\n\n- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) – Intelligent autocomplete and hover preview.\n- [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) – Sort Tailwind classes automatically.\n\n## Animations \u0026 Transitions\n\n- [Tailwind CSS Animations](https://github.com/benface/tailwindcss-animations) – Reusable animation utilities.\n- [Animista](https://animista.net/) – Generate animation classes you can use with Tailwind.\n- [Motion One](https://motion.dev/) – Lightweight animation library for React apps styled with Tailwind.\n\n## Learning Resources\n\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs) – The official reference.\n- [Tailwind CSS From Scratch (YouTube)](https://www.youtube.com/watch?v=dFgzHOX84xQ) – Video tutorial by Traversy Media.\n- [Build UI with Tailwind (Scrimba)](https://scrimba.com/learn/tailwind) – Interactive Tailwind CSS course.\n- [The Net Ninja’s Tailwind Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ) – Beginner-friendly YouTube playlist.\n\n## Design Tools \u0026 Figma\n\n- [Tailwind UI Figma Kit](https://tailwindui.com/resources) – Official Figma files for Tailwind UI.\n- [Figma Tailwind CSS Plugin](https://www.figma.com/community/plugin/739014140885539349/Tailwind-CSS) – Map Figma designs to Tailwind classes.\n- [FlowBite Figma UI Kit](https://flowbite.com/figma/) – Design library aligned with Flowbite components.\n\n## Projects Using Tailwind\n\n- [Laravel Breeze](https://github.com/laravel/breeze) – Laravel starter kit using Tailwind CSS.\n- [Next.js + Tailwind Starter](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss) – Vercel’s official Next.js + Tailwind example.\n- [Astro Theme: Starlight](https://github.com/withastro/starlight) – Astro docs theme built with Tailwind CSS.\n\n## Related Awesome Lists\n\n- **[Awesome CSS](https://github.com/awesomelistsio/awesome-css)** – Styles and utilities for front-end development.\n- **[Awesome HTML5](https://github.com/awesomelistsio/awesome-html5)** – Semantic markup and elements.\n- **[Awesome Frontend Development](https://github.com/awesomelistsio/awesome-front-end-development)** – Tools and resources for modern front-end development.\n  \n## Contribute\n\nContributions are welcome. Please ensure your submission fully follows the requirements outlined in [`CONTRIBUTING.md`](CONTRIBUTING.md), including formatting, scope alignment, and category placement.\n\nPull requests that do not adhere to the contribution guidelines may be closed.\n\n## License\n\n[![CC0](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-sa.svg)](http://creativecommons.org/licenses/by-sa/4.0/)\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/brandonhimpfen%2Fawesome-tailwindcss/projects"}