https://github.com/aniftyco/awesome-tailwindcss

😎 Awesome things related to Tailwind CSS
https://github.com/aniftyco/awesome-tailwindcss

List: awesome-tailwindcss

apps awesome awesome-list css postcss resources tailwind tailwindcss websites

Last synced: 23 days ago
JSON representation

😎 Awesome things related to Tailwind CSS

• Host: GitHub
• URL: https://github.com/aniftyco/awesome-tailwindcss
• Owner: aniftyco
• License: cc0-1.0
• Created: 2017-11-08T15:35:50.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-07-20T22:24:13.000Z (over 1 year ago)
• Last Synced: 2024-08-04T14:10:58.860Z (about 1 year ago)
• Topics: apps, awesome, awesome-list, css, postcss, resources, tailwind, tailwindcss, websites
• Homepage: https://tailwindcss.com
• Size: 401 KB
• Stars: 13,153
• Watchers: 218
• Forks: 933
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesome-lists - Awesome Tailwind CSS
• more-awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesome-projects - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• lists - awesome-tailwindcss
• awesome-cn - Tailwind CSS - 实用优先的CSS框架，用于快速UI开发 (前端开发)
• collection - awesome-tailwindcss
• Awesome-Web3 - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesome-awesomeness - Tailwind CSS
• fucking-awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesomelist - awesome-tailwindcss
• awesome-ui-patterns - Awesome Tailwind CSS
• awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesome - awesome-tailwindcss - A curated list of awesome things related to Tailwind CSS (Others)
• awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• fucking-lists - awesome-tailwindcss
• awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesome-awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• StarryDivineSky - aniftyco/awesome-tailwindcss
• ultimate-awesome - awesome-tailwindcss - 😎 Awesome things related to Tailwind CSS. (Other Lists / TeX Lists)
• web-gelistirme-101 - awesome tailwind
• fucking-awesome-awesomeness - Tailwind CSS
• awesome-arsenal - Tailwind CSS - Tailwind CSS 资源。 (资源 / 真棒)
• awesome - Tailwind CSS - Utility-first CSS framework for rapid UI development. (Front-End Development)
• awesome-dev-reources-bangla - **Awesome Tailwind CSS** - 😎 Awesome things related to Tailwind CSS
• stars - awesome-tailwindcss
• stars - awesome-tailwindcss
• fucking-awesome-tailwindcss - aniftyco/awesome-tailwindcss
• frontend-focus - awesome-tailwindcss
• awesome-ccamel - aniftyco/awesome-tailwindcss - 😎 Awesome things related to Tailwind CSS (Misc)
• awesome-starred-test - aniftyco/awesome-tailwindcss - 😎 Awesome things related to Tailwind CSS (Others)

README

          




  


  

  


  




Awesome Tailwind CSS




  Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

  


  


  

    

  

   

  

    

  

  


  




## Contents

- [Useful links](#useful-links)

- [IDE extensions](#ide-extensions)

- [Tools](#tools)

- [UI libraries, components & templates](#ui-libraries-components--templates)

- [Plugins](#plugins)

## Useful links

**Legend**: 💙 Official resource

- 💙 [Website](https://tailwindcss.com) - Official Tailwind CSS website.

- 💙 [Repository](https://github.com/tailwindcss/tailwindcss) - Official Tailwind CSS repository.

- 💙 [Tailwind Plus](https://tailwindcss.com/plus) - UI blocks, templates, and a UI kit by the Tailwind CSS team.

- 💙 [Headless UI](https://github.com/tailwindlabs/headlessui) - Completely unstyled, fully accessible UI components.

- 💙 [Heroicons](https://heroicons.com/) - Beautiful, hand-crafted SVG icons.

- 💙 [Play](https://play.tailwindcss.com/) - Advanced online playground for Tailwind CSS.

- 💙 [Discord](https://tailwindcss.com/discord) - Official Discord server to connect with other community members about Tailwind CSS.

- [Tailwind Weekly](https://tailwindweekly.com/) - Weekly newsletter about all things Tailwind CSS.

## IDE extensions

**Legend**: 💙 Official resource

- 💙 [Intellisense for Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Provides IntelliSense in Visual Studio Code.

- [LSP support for Emacs](https://github.com/merrickluo/lsp-tailwindcss) - LSP support for Emacs.

- [Editor support for VS2022](https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS) - IntelliSense, linting, sorting, and more in Visual Studio 2022.

## Tools

**Legend**: 🌍 Accessible online · 🌐 Browser extension · 🔼 Conversion or upgrade tool · 🔧 Generator · 🅰 Typing/enforcement · 💼 Plugins/Tools/Extensions for external services · 🎨 Color-related · 🚀 Framework

- 💙💼 [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - Official Tailwind CSS plugin for Prettier.

- 🎨🌍🔧 [UI colors](https://uicolors.app/create) - Color palette generator for Tailwind CSS.

- 🎨🌍🔧 [Tailwind Color Shades](https://javisperez.github.io/tailwindcolorshades) - Color shades generator for Tailwind CSS.

- 🎨🌍🔧 [TailwindInk](https://tailwind.ink/) - AI palette generator, trained with the Tailwind CSS palette.

- 🎨🌍🔧 [Hypercolor](https://hypercolor.dev/) - Collection of Tailwind CSS gradients with directional options.

- 🎨🌍🔧 [Tints](https://www.tints.dev/) - Color palette generator and API for Tailwind CSS.

- 🎨🌍🔧 [Fullwind CSS](https://fullwindcss.com/) - Extend Tailwind CSS color palettes with additional shades.

- 🎨🌍🔧 [Inclusive colors](https://www.inclusivecolors.com/) - Create fine-tuned WCAG accessible Tailwind CSS color palettes.

- 🔼🌍 [Prefixer](https://github.vue.tailwind-prefix.cbass.dev) - Tailwind classes' prefixer tool.

- 🔼 [RustyWind](https://github.com/avencera/rustywind) - CLI tool for sorting Tailwind CSS classes.

- 🚀 [Maizzle](https://maizzle.com/) - Framework for rapid email prototyping with Tailwind CSS.

- 💼 [@nuxtjs/tailwindcss](https://github.com/nuxt-community/tailwindcss-module) - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).

- 💼 [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) - Gem for using Tailwind CSS with Rails' asset pipeline.

- 💼 [Config viewer](https://github.com/rogden/tailwind-config-viewer) - Local UI tool for visualizing your Tailwind CSS configuration file.

- 💼 [Raycast extension](https://www.raycast.com/vimtor/tailwindcss) - Search classes, documentation and colors in Raycast Launcher.

- 💼 [NativeWind](https://www.nativewind.dev) - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.

- 🌐 [Gimli Tailwind](https://chromewebstore.google.com/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl) - Smart tools for Tailwind CSS as a browser extension.

- 🌐 [CSS Variables Editor](https://www.cssvariables.com) - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.

- 🌐 [DivMagic](https://divmagic.com) - Copy any web element and style as Tailwind CSS component.

## UI libraries, components & templates

**Legend**: 💙 Official resource · 📚 UI library · 🧩 Copy-pastable components · 📁 Full templates

- 💙🧩 [Tailwind UI](https://tailwindcss.com/plus/ui-blocks/marketing) - Component library made with Tailwind CSS.

- 💙📚 [Headless UI](https://headlessui.com/) - Completely unstyled, fully accessible UI components.

- 💙📁 [Catalyst](https://tailwindcss.com/plus/ui-kit) - Beautiful, accessible application UI kit for React.

- 🧩 [shadcn UI](https://ui.shadcn.com) - Re-usable components built using Radix UI and Tailwind CSS.

- 🧩 [Layouts for Tailwind](https://layoutsfortailwind.lalokalabs.dev) - Layouts and UI patterns for Tailwind CSS.

- 🧩 [Meraki UI Components](https://merakiui.com) - Beautiful Tailwind CSS components that support RTL languages.

- 🧩 [Kometa UI Kit](https://kitwind.io/products/kometa/components) - Free multi-purpose UI kit, built with Tailwind CSS.

- 🧩 [HyperUI](https://hyperui.dev) - Open source marketing and ecommerce Tailwind CSS components.

- 🧩 [Ripple UI](https://www.ripple-ui.com) - Clean, modern and beautiful Tailwind CSS components.

- 🧩 [Pines UI](https://devdojo.com/pines) - Alpine and Tailwind CSS UI library.

- 🧩 [Kokonut UI](https://kokonutui.com/) - Collection of modern, interactive customizable UI components.

- 🧩 [8bitcn UI](https://8bitcn.com) - Re-usable retro components built using Shadcn UI and Tailwind CSS.

- 🧩 [Xtend UI](https://github.com/xtendui/xtendui) - Tailwind CSS components with advanced interactions and animations.

- 🧩 [Tremor](https://tremor.so) - React library to build charts and dashboards with Tailwind CSS.

- 📚 [Daisy UI](https://github.com/saadeghi/daisyui) - UI Components for Tailwind CSS.

- 📚 [Flowbite](https://flowbite.com/docs/getting-started/introduction/) - Component library built with Tailwind CSS.

- 📚 [STDF](https://stdf.design) - Mobile web component library based on Svelte and Tailwind CSS.

- 📚 [Preline UI](https://preline.co) - Open-source Tailwind CSS components library for any needs.

- 📚 [Date picker](https://github.com/themesberg/tailwind-datepicker) - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.

- 📁 [Built at lightspeed](https://www.builtatlightspeed.com/) - Massive directory of 500+ Tailwind templates, starters and UI kits.

- 📁 [Admin One Vue 3](https://github.com/justboil/admin-one-vue-tailwind) - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.

- 📁 [Admin One React](https://github.com/justboil/admin-one-react-tailwind) - Free React.js Tailwind CSS admin template with Next.js & TypeScript.

- 📁 [Flowbite Admin Dashboard](https://github.com/themesberg/flowbite-admin-dashboard) - Open-source admin dashboard template built with Tailwind CSS and Flowbite.

- 📁 [Astro Template Resume](https://github.com/fortezhuo/fortezhuo.my.id) - Eye-catching resume template built with Astro, Tailwind CSS.

- 📁 [Astro Template Cactus](https://github.com/chrismwilliams/astro-theme-cactus) - Tailwind CSS Astro starter template.

- 📁 [Astro Template Ovidius](https://github.com/JustGoodUI/ovidius-astro-theme) - Tailwind CSS & Astro blog template.

- 📁 [Astro Template Dante](https://github.com/JustGoodUI/dante-astro-theme) - Tailwind CSS & Astro blog/portfolio template.

- 📁 [Statichunt](https://statichunt.com/tailwind-templates) - Open source directory of hand-picked free and premium Tailwind templates & starters.

## Plugins

**Legend**: 💙 Official plugin · 🎨 Theming · 💼 Utilities · 🧩 Components · 🛑 Deprecated

- 💙🧩 [Typography](https://github.com/tailwindlabs/tailwindcss-typography) - Adds a `prose` class for beautiful typographic defaults.

- 💙 [Forms](https://github.com/tailwindlabs/tailwindcss-forms) - Adds better default styles to form elements.

- 🎨 [Themer](https://github.com/RyanClementsHax/tailwindcss-themer) - Adds theming support for Tailwind CSS with CSS variables and variants.

- 💼 [Bootstrap grid](https://github.com/karolis-sh/tailwind-bootstrap-grid) - Generates Bootstrap's style flexbox grid system.

- 💼 [Dot & grid backgrounds](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds) - Adds `bg-grid` and `bg-dot` classes to add easy-to-customize grid and dot pattern backgrounds with just CSS.

- 💼 [Leading Trim](https://github.com/stormwarning/tailwindcss-capsize) - Adds utilities to trim text whitespace, using [Capsize](https://github.com/seek-oss/capsize).

- 💼 [Scrollbar Hide](https://github.com/reslear/tailwind-scrollbar-hide) - Adds `scrollbar-hide` class for visual hide scrollbar.

- 💼 [px to viewport](https://github.com/the-lemonboy/tailwindcss-px-to-viewport) - Adds utilities to automatically convert px to vw / vh.

- 💼🧩 [Fluid](https://github.com/barvian/fluid-tailwind) - Adds fluid `clamp()` versions of every built-in utility.

- 🧩 [Debug screens](https://github.com/jorenvanhee/tailwindcss-debug-screens) - Adds a component that shows the currently active screen (responsive breakpoint).



  


  


  ·

  


  


  Contributions welcome! Read the contribution guidelines first.