Repository: aniftyco/awesome-tailwindcss
Stars: 14978
README.md
<!--lint disable awesome-heading awesome-github double-link no-dead-urls-->
<p align="center">
<br>
<img width="100" src="./assets/logo.svg" alt="Tailwind CSS logo">
<br>
<br>
</p>
<h2 align="center">Awesome Tailwind CSS</h2>
<p align="center">
<a href="https://tailwindcss.com">Tailwind CSS</a> is a utility-first CSS framework for rapidly building custom user interfaces.
<br>
<br>
<a href="https://github.com/sindresorhus/awesome">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome badge">
</a>
<a href="https://github.com/sindresorhus/awesome-lint">
<img src="https://github.com/aniftyco/awesome-tailwindcss/workflows/Lint/badge.svg" alt="Lint status badge">
</a>
<br>
<br>
</p>
Contents
- Useful links
- IDE extensions
- Tools
- UI libraries, components & templates
- Plugins
Useful links
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
- 💙 Intellisense for Code - Provides IntelliSense in Visual Studio Code.
- LSP support for Emacs - Provides IntelliSense in Emacs.
- Editor support for VS2022 - 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 - 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.
- 🔼 Tailwind to Inline styles converter - Converts Tailwind CSS classes to inline styles in email templates.
- 🚀 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
- 💼 @nuxtjs/tailwindcss - Tailwind CSS module for Nuxt.js 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 - 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.
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).
<p align="center">
<br />
<br />
·
<br />
<br />
<sub>Contributions welcome! Read the <a href="CONTRIBUTING.md">contribution guidelines</a> first.</sub>
</p>