awesome-tailwindcss

<img width="100" src="./assets/logo.svg" alt="Tailwind CSS logo"> <h2 align="center">Awesome Tailwind CSS</h2> <a href="https://tailwindcss.com">Tailwind CSS</a> is a utility-first CSS framework for rapidly building custom user interfaces. <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>

Useful Links
IDE Extensions
Plugins
Tools
UI Libraries, Components & Templates
Starters & Themes
Learning

Useful Links

Legend: 💙 Official resource

💙 Website - Official Tailwind CSS website.
💙 Repository - Official Tailwind CSS repository.
💙 Tailwind UI - Component library made with Tailwind CSS.
💙 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.
Tailwind CSS Highlight - Highlights utility classes in Visual Studio Code.
CSS to TailwindCSS converter for Code - Converts CSS to Tailwind CSS in Visual Studio Code.

Plugins

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

💙🧩 Typography - Adds a prose class for beautiful typographic defaults.
💙💼 Container queries - Provides utilities for container queries.
💙 Forms - Adds better default styles to form elements.
🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
🎨🧬 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
🎨🧩 Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
🎨🧩 CSS Variables - Exports custom CSS variables.
🎨💼 Accent - Adds accent colors for more dynamic and flexible color utilization.
💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
💼 Image Rendering - Adds image-rendering utilities.
💼 Elevation - Adds Material UI elevation utilities.
💼 RFS - Adds RFS utilities.
💼 Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
💼 Background SVG - Inject SVGs as background images with color variants.
💼 Background Unsplash - Apply unsplash.com images as background.
💼 Brand Colors - Adds various brand colors for background, border and text.
💼 Bootstrap Grid - Generates Bootstrap's style flexbox grid system.
💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
💼 Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
💼 Fluid Type - Adds fluid type (font-size) utilities.
💼 Grid Areas - Adds grid-areas and grid-area utilities.
💼 Full bleed background and borders - Provides utilities for extended backgrounds and borders.
💼 CSS Filter Order - Adds filter-order utilities for changing the order of filters in the generated CSS.
💼 Tailwind CSS 3D - Adds 3D transform utilities and animations.
💼 Claymorphism - Adds clay utilities for creating claymorphism style.
💼🧬🧩 Fluid - Adds fluid clamp() versions of every built-in utility.
🧬 FormKit - Adds variants for input and form states for FormKit.
🧬 Htmx - Adds variants for styling on htmx events.
🧩 Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
💼 Dot & Grid Backgrounds - Adds bg-grid and bg-dot classes to add easy-to-customize grid and dot pattern backgrounds with just CSS.

<details> <summary>🛑 *Below are official plugins which functionalities are either deprecated or (partially) implemented in core.*</summary>

🛑💼💙 Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
🛑🧩💙 Custom Forms - Adds better default styles to form elements.
🛑💙💼 Aspect Ratio - Adds composable aspect ratio utilities.

</details>

Tools

Legend: 🌍 Accessible online · 🔼 Conversion or upgrade tool · 🔧 Generator · 🅰 Typing/enforcement · 💼 Plugins/Tools/Extensions for external services · 🎨 Color-related · 🚀 Framework · 💰 Paid plans

💙💼 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.
🎨🌍🔧 Palette generator - Color palette generator that outputs Tailwind CSS configuration files.
🎨🌍🔧 Tailwind Colors - Color configuration generator for Tailwind CSS.
🎨🌍🔧 Tailwind Color Explorer - Color explorer for Tailwind CSS.
🎨🌍🔧 TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
🎨🌍🔧 Gradient Designer - Generate gradients for Tailwind 2.0+.
🎨🌍🔧 Grayscale Design - A Luminance-based color palette generator.
🎨🌍🔧 Hypercolor - Collection of pre-configured Tailwind CSS gradients with directional options.
🎨🌍🔧 Palettolithic - Generates harmonius color palettes based on one color.
🎨🌍🔧 Tailwind Gradient Generator - Create perfect Tailwind CSS gradients with zero lines of code.
🎨🌍🔧 Tints - Color palette penerator and API for Tailwind CSS.
🎨🌍🔧 Tailwind CSS Colors - Cheat sheet for Tailwind CSS colors.
🎨🌍🔧 Tailwind Gradients - Collection of gradients using Tailwind CSS classes.
🎨🌍🔧 Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
🌍🔧💼 Twind - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
🌍🔧 tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
🌍🔧 brands-tail-color - Configuration generator using various brands' colors.
🌍 Typography playground - Tool for trying different Google Fonts combinations with the Tailwind CSS typography plugin.
🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.
🔼🌍🔧 Tailwindhelper - Visualize Tailwind CSS classes and unit converter.
🔼🌍 Prefixer - Tailwind classes' prefixer tool.
🔼🌍 CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
🔼🌍 ska-tailwind-editor - Edit Tailwind HTML as WordPress blocks with intuitive UI for Tailwind classes and get HTML or JSX back.
🔼 Tailwindo - Bootstrap to Tailwind CSS converter.
🔼 RustyWind - CLI tool for sorting Tailwind CSS classes.
🚀 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
🅰 react-native-tailwindcss - React Native typing system.
💼 Alfred Workflow - Fast Tailwind CSS documentation search application.
💼 vue-cli-plugin-tailwind - Vue CLI plugin that adds Tailwind CSS to a project.
💼 @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
💼 preact-cli-tailwind - Tailwind CSS integration for Preact.
💼 tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
💼🔧 twin.macro - Use Tailwind classes within any CSS-in-JS library.
💼🔧 tailwindcss-webpack-plugin - Out-of-the-box Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration.
💼🔧 tailwindcss-vite-plugin - Vite plugin for Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration.
💼🔧 Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
💼 clb - clb (class list builder) is a utility function that builds a class list based on a Stitches like API.
💼 react-with-class - Utility function for creating primitive React components with a set of classes, props or variants.
💼 twined-components - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.
💼 Tails DevTools - All-in-one browser extension for Tailwind CSS.
💼 Impulse.dev – UI editor for Tailwind CSS and React that edits your code.
💼 Tailiscope.nvim - Tailwind CSS cheat sheet integrated in Neovim.
💼 Raycast Extension - Search classes, documentation and colors in Raycast Launcher.
💼 DivMagic - Copy any web element and style as Tailwind CSS component.
💼 Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
🌍🔧 Tailwind Grid Generator - Drag and drop Tailwind CSS grid generator.
🌍🔧 Tailwind Box Shadows Generator - Box Shadows generator.
💰🌍🔧 Windframe - Tailwind CSS drag and drop builder to rapidly build and prototype websites.