awesome-tailwindcss

Awesome Tailwind CSS

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

 

Contents

• 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.

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.