Skip to content

Tailwind CSS


Tailwind CSS logo

Awesome Tailwind CSS

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

Awesome badge   Lint status badge

Legend: 馃挋 Official resource

  • 馃挋 Website - Official Tailwind CSS website.
  • 馃挋 Repository - Official Tailwind CSS repository.
  • 馃挋 Tailwind Plus - UI blocks, templates, and a UI kit by the Tailwind CSS team.
  • 馃挋 Headless UI - Completely unstyled, fully accessible UI components.
  • 馃挋 Heroicons - Beautiful, hand-crafted SVG icons.
  • 馃挋 Play - Advanced online playground for Tailwind CSS.
  • 馃挋 Discord - Official Discord server to connect with other community members about Tailwind CSS.
  • Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.

IDE extensions

Legend: 馃挋 Official resource

Tools

Legend: 馃實 Accessible online 路 馃寪 Browser extension 路 馃敿 Conversion or upgrade tool 路 馃敡 Generator 路 馃叞 Typing/enforcement 路 馃捈 Plugins/Tools/Extensions for external services 路 馃帹 Color-related 路 馃殌 Framework

  • 馃挋馃捈 Prettier plugin - Official Tailwind CSS plugin for Prettier.
  • 馃帹馃實馃敡 UI colors - Color palette generator for Tailwind CSS.
  • 馃帹馃實馃敡 Tailwind Color Shades - Color shades generator for Tailwind CSS.
  • 馃帹馃實馃敡 TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
  • 馃帹馃實馃敡 Hypercolor - Collection of Tailwind CSS gradients with directional options.
  • 馃帹馃實馃敡 Tints - Color palette generator and API for Tailwind CSS.
  • 馃帹馃實馃敡 Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
  • 馃帹馃實馃敡 Inclusive colors - Create fine-tuned WCAG accessible Tailwind CSS color palettes.
  • 馃敿馃實 Prefixer - Tailwind classes' prefixer tool.
  • 馃敿 RustyWind - CLI tool for sorting Tailwind CSS classes.
  • 馃殌 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
  • 馃捈 @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
  • 馃捈 tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
  • 馃捈 Config viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
  • 馃捈 Raycast extension - Search classes, documentation and colors in Raycast Launcher.
  • 馃捈 NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
  • 馃寪 Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
  • 馃寪 CSS Variables Editor - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.
  • 馃寪 DivMagic - 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 - Component library made with Tailwind CSS.
  • 馃挋馃摎 Headless UI - Completely unstyled, fully accessible UI components.
  • 馃挋馃搧 Catalyst - Beautiful, accessible application UI kit for React.
  • 馃З shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
  • 馃З Layouts for Tailwind - Layouts and UI patterns for Tailwind CSS.
  • 馃З Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
  • 馃З Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
  • 馃З HyperUI - Open source marketing and ecommerce Tailwind CSS components.
  • 馃З Ripple UI - Clean, modern and beautiful Tailwind CSS components.
  • 馃З Pines UI - Alpine and Tailwind CSS UI library.
  • 馃З Kokonut UI - Collection of modern, interactive customizable UI components.
  • 馃З 8bitcn UI - Re-usable retro components built using Shadcn UI and Tailwind CSS.
  • 馃З Xtend UI - Tailwind CSS components with advanced interactions and animations.
  • 馃З Tremor - React library to build charts and dashboards with Tailwind CSS.
  • 馃摎 Daisy UI - UI Components for Tailwind CSS.
  • 馃摎 Flowbite - Component library built with Tailwind CSS.
  • 馃摎 STDF - Mobile web component library based on Svelte and Tailwind CSS.
  • 馃摎 Preline UI - Open-source Tailwind CSS components library for any needs.
  • 馃摎 Date picker - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
  • 馃搧 Built at lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
  • 馃搧 Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
  • 馃搧 Admin One React - Free React.js Tailwind CSS admin template with Next.js & TypeScript.
  • 馃搧 Flowbite Admin Dashboard - Open-source admin dashboard template built with Tailwind CSS and Flowbite.
  • 馃搧 Astro Template Resume - Eye-catching resume template built with Astro, Tailwind CSS.
  • 馃搧 Astro Template Cactus - Tailwind CSS Astro starter template.
  • 馃搧 Astro Template Ovidius - Tailwind CSS & Astro blog template.
  • 馃搧 Astro Template Dante - Tailwind CSS & Astro blog/portfolio template.
  • 馃搧 Statichunt - Open source directory of hand-picked free and premium Tailwind templates & starters.

Plugins

Legend: 馃挋 Official plugin 路 馃帹 Theming 路 馃捈 Utilities 路 馃З Components 路 馃洃 Deprecated

  • 馃挋馃З Typography - Adds a prose class for beautiful typographic defaults.
  • 馃挋 Forms - Adds better default styles to form elements.
  • 馃帹 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
  • 馃捈 Bootstrap grid - Generates Bootstrap's style flexbox grid system.
  • 馃捈 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 - Adds utilities to trim text whitespace, using Capsize.
  • 馃捈 Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
  • 馃捈 px to viewport - Adds utilities to automatically convert px to vw / vh.
  • 馃捈馃З Fluid - Adds fluid clamp() versions of every built-in utility.
  • 馃З Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).



路

Contributions welcome! Read the contribution guidelines first.