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).


  
  
  ·
  
  
  


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