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.
• 💙 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 - LSP support for 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.
• 🚀 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.