Awesome Tailwind CSS

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

 

Contents

• Useful links
• IDE extensions
• Tools
• UI libraries, components & templates
• Plugins

Useful links

Legend: 💙 Official resource

• 💙 🌎 Website - Official Tailwind CSS website.
• 💙  97651⭐   6340🍴 Repository) - Official Tailwind CSS repository.
• 💙 🌎 Tailwind Plus - UI blocks, templates, and a UI kit by the Tailwind CSS team.
• 💙  28749⭐   1202🍴 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.
•    223⭐     23🍴 LSP support for Emacs) - Provides IntelliSense in Emacs.
•    150⭐      7🍴 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

• 💙💼   7133⭐    178🍴 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.
• 🎨🌍🔧 🌎 FreeColorPalettes.co - Generates a 50–950 Tailwind CSS color scale from any hex color.
• 🌍🔧 🌎 Base-2 Rounding - Spacing and sizing value picker for Tailwind CSS v4's bracketless arbitrary values.
• 🔼🌍 🌎 Prefixer - Tailwind classes' prefixer tool.
• 🔼    623⭐     29🍴 RustyWind) - CLI tool for sorting Tailwind CSS classes.
• 🔼    101⭐      7🍴 Tailwind to Inline styles converter) - Converts Tailwind CSS classes to inline styles in email templates.
• 🚀 🌎 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
• 💼   1869⭐    192🍴 @nuxtjs/tailwindcss) - Tailwind CSS module for Nuxt.js with PurgeCSS and modern CSS (preset env 1).
• 💼   1587⭐    190🍴 tailwindcss-rails) - Gem for using Tailwind CSS with Rails' asset pipeline.
• 💼   2216⭐    118🍴 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.
• 🧩 🌎 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.
• 🧩    452⭐     17🍴 Xtend UI) - Tailwind CSS components with advanced interactions and animations.
• 🧩 🌎 Tremor - React library to build charts and dashboards with Tailwind CSS.
• 🧩 🌎 Radian UI - Accessible, customizable React components built with Tailwind CSS, with a CLI.
• 📚  42463⭐   1692🍴 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.
• 📚    147⭐     40🍴 Date picker) - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
• 📚 🌎 Appica UI - Open-source React component library built on Tailwind CSS, with a matching Figma library.
• 📁 🌎 Built at lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
• 📁   2468⭐    441🍴 Admin One Vue 3) - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
• 📁    590⭐    176🍴 Admin One React) - Free React.js Tailwind CSS admin template with Next.js & TypeScript.
• 📁   2886⭐    625🍴 Flowbite Admin Dashboard) - Open-source admin dashboard template built with Tailwind CSS and Flowbite.
• 📁   1727⭐    280🍴 Astro Template Cactus) - Tailwind CSS Astro starter template.
• 📁    117⭐     28🍴 Astro Template Ovidius) - Tailwind CSS & Astro blog template.
• 📁    513⭐    338🍴 Astro Template Dante) - Tailwind CSS & Astro blog/portfolio template.

Plugins

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

• 💙🧩   6474⭐    317🍴 Typography) - Adds a prose class for beautiful typographic defaults.
• 💙   4567⭐    230🍴 Forms) - Adds better default styles to form elements.
• 🎨    315⭐     12🍴 Themer) - Adds theming support for Tailwind CSS with CSS variables and variants.
• 💼    189⭐     23🍴 Bootstrap grid) - Generates Bootstrap's style flexbox grid system.
• 💼     39⭐      1🍴 Dot & grid backgrounds) - Adds bg-grid and bg-dot classes to add easy-to-customize grid and dot pattern backgrounds with just CSS.
• 💼    122⭐      2🍴 Leading Trim) - Adds utilities to trim text whitespace, using   1727⭐     48🍴 Capsize).
• 💼    315⭐     10🍴 Scrollbar Hide) - Adds scrollbar-hide class for visual hide scrollbar.
• 💼     28⭐      4🍴 px to viewport) - Adds utilities to automatically convert px to vw / vh.
• 💼     10⭐      0🍴 tailwind-hitslop) - Adds hit-slop utilities to invisibly expand touch targets, like React Native's hitSlop.
• 💼    103⭐      1🍴 tw-fade) - Adds fade-t/-b/-x/-y utilities that enable scroll-aware edge fading.
• 💼🧩   1779⭐     31🍴 Fluid) - Adds fluid clamp() versions of every built-in utility.
• 🧩    673⭐     19🍴 Debug screens) - Adds a component that shows the currently active screen (responsive breakpoint).

·

_{Contributions welcome! Read the contribution guidelines first.}

Source

 15188⭐   1029🍴 aniftyco/awesome-tailwindcss)