Awesome Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
Contents
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
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.
🛑 *Below are official plugins which functionalities are either deprecated or (partially) implemented in core.*
- 🛑💼💙 [Line Clamp ![GitHub Repo Stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss-line-clamp) ![GitHub last commit](https://img.shields.io/github/last-commit/tailwindlabs/tailwindcss-line-clamp)](https://github.com/tailwindlabs/tailwindcss-line-clamp) - Provides utilities for visually truncating text after a fixed number of lines.
- 🛑🧩💙 [Custom Forms ![GitHub Repo Stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss-custom-forms) ![GitHub last commit](https://img.shields.io/github/last-commit/tailwindlabs/tailwindcss-custom-forms)](https://github.com/tailwindlabs/tailwindcss-custom-forms) - Adds better default styles to form elements.
- 🛑💙💼 [Aspect Ratio ![GitHub Repo Stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss-aspect-ratio) ![GitHub last commit](https://img.shields.io/github/last-commit/tailwindlabs/tailwindcss-aspect-ratio)](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) - Adds composable aspect ratio utilities.
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.
- 🌍 Static Tailwind - The most used Tailwind classes, precompiled, with no build step.
- 🎨🔧 Design GUI - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.
UI Libraries, Components & Templates
Legend: 💙 Official resource · 📚 Library · 🧩 Components · 📁 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.
- 📚 VueTailwind - Vue.js UI library using Tailwind CSS.
- 📚 Flowbite - Open-source component library built with Tailwind CSS.
- 📚 a17t - Atomic design toolkit built to extend Tailwind CSS.
- 📚 tails-ui - React UI library using Tailwind CSS.
- 📚 tails - Hand-crafted templates and components using Tailwind CSS.
- 📚 Svelte Headless UI - Unofficial Svelte port of Headless UI.
- 📚 Xtend UI - Tailwind CSS components with advanced interactions and animations.
- 📚 Headless UI Float - Floating UI integration for Headless UI.
- 📚 Vanilla Components - Set of fully customizable Vue components.
- 📚 Sailboat UI - Modern UI framework for Tailwind CSS.
- 📚 Built At Lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
- 📚 Statichunt - Open source directory of hand-picked free and premium Tailwind templates & Starters.
- 📚 Tailkits - Curated Tailwind CSS components, templates, UI kits, resources, tools & more.
- 📚 STDF - Mobile web component library based on Svelte and Tailwind CSS.
- 📚 TWC - Lightweight library to create reusable React + Tailwind CSS components in one line.
- 📚 Tremor - React library to build charts and dashboards with Tailwind CSS.
- 🧩 TailBlocks - 60+ different ready to use Tailwind CSS blocks.
- 🧩 Tailwind Components - Community-driven Tailwind CSS component repository.
- 🧩 Tailwind Toolbox - Templates, components and resources.
- 🧩 Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
- 🧩 Tailwind Cards - Growing collection of text/image cards.
- 🧩📁 Tailwind Templates - Collection of templates and components.
- 🧩📁 Treact - React UI templates and components built using Tailwind CSS.
- 🧩📁 Jakarta LTE - Admin template using Tailwind CSS.
- 🧩📁 themes.dev - Handcrafted, free and premium Tailwind CSS themes and components.
- 🧩 Sail UI - Collection of basic UI components built on Tailwind CSS.
- 🧩 jQuery Toggler - Switches using jQuery and Tailwind CSS.
- 🧩 Tailwind Kit - Framework-agnostic, Vue.js, React and Angular components.
- 🧩 WickedBlocks - Collection of more than 120 layout blocks and components built with Tailwind CSS.
- 🧩 Daisy UI - UI Components for Tailwind CSS.
- 🧩 Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
- 🧩 Mamba UI - Free Tailwind CSS components, sections and templates.
- 🧩 Litepie Date picker - A date range picker component for Vue.js and Tailwind CSS.
- 🧩 Tailwind Datepicker - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
- 🧩 Tailwind Typeahead - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.
- 🧩 Material Tailwind - Easy to use components library for Tailwind CSS and Material Design.
- 🧩 Layouts for Tailwind - Layouts and UI Patterns for Tailwind CSS.
- 🧩 HyperUI - Open source marketing and ecommerce Tailwind CSS components.
- 🧩 Snippets - Open source collection of animation snippets made for Tailwind CSS.
- 🧩 Fancy Tailwind - Large collection of Tailwind CSS UI components (700+).
- 🧩 Myna UI - Open source UI Components and Marketing Elements made with Tailwind CSS.
- 🧩 RippleUI - Clean, modern and beautiful Tailwind CSS components.
- 🧩 Wind UI - Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app.
- 🧩 Pines UI - Alpine and Tailwind CSS UI library.
- 🧩 NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
- 🧩 Windstatic - Set of 161 elements & layouts made with Tailwind CSS and Alpine.js.
- 🧩 TailwindFlex - Free library of Tailwind CSS examples.
- 🧩 Shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
- 🧩 Indie UI - Rich styled UI components.
- 📁 Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
- 📁 EasyTailwind - Freemium, easily customizable templates made with Tailwind CSS.
- 📁 Windmill Dashboard - Multi theme, completely accessible dashboard template.
- 📁 Tailwind Admin - Administration panel template with Tailwind CSS.
- 📁 Landing Gradients - Landing page template using gradients (1.7+).
- 📁 Resume - Simple resume with Tailwind CSS.
- 📁 Simple Light - Free landing page template built with React & Tailwind CSS.
- 📁 V-Dashboard - Dashboard starter template built with Vue 3 and Tailwind CSS.
- 📁 Petra - Free landing page template built with Nuxt.js & Tailwind CSS.
- 📁 Tailmin - Admin dashboard built with Vue.js and Tailwind CSS.
- 📁 OhMySMTP Templates - Set of Transactional HTML Email Templates, built with Maizzle
- 📁 Material Tailwind Kit React - Free Tailwind CSS and React UI kit.
- 📁 Material Tailwind Dashboard React - Free Tailwind CSS and React admin template.
- 📁 Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
- 📁 Cruip - Beautifully designed HTML, React, and Vue.js templates.
- 📁 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.
Starters & Themes
Legend: 💼 Package · 📟 Command line tool/generator · 🚀 Cloneable
- 📟 Create React App with PurgeCSS - CRA script that adds Tailwind CSS and PurgeCSS.
- 📟 Laravel Preset - Adds Tailwind CSS to the Laravel framework.
- 📟💼 Laravel Front-end Preset - Front-end preset using Tailwind CSS for Laravel.
- 📟💼 Laravel Dark Front-end Preset - Dark-themed front-end preset using Tailwind CSS for Laravel.
- 🚀 Create React App with EmotionJS - CRA boilerplate using Tailwind CSS and Emotion JS.
- 📟 Create React App with TypeScript - CRA template with support for Tailwind CSS and TypeScript.
- 📟 Next.js PWA – CLI that generate boilerplate code of Next.js PWA along with Tailwind CSS integration.
- 📟 new-tailwind-app - Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic Tailwind CSS apps.
- 🚀 Tailwind CSS Boilerplate - Tailwind CSS boilerplate using Parcel.
- 🚀 Jekyll Starter - Jekyll starter using Tailwind CSS.
- 🚀 Jekyll Starter - Jekyll starter using Tailwind CSS.
- 🚀 Jekyll Starter - Jekyll starter using Tailwind CSS
- 🚀 Gulp Starter - Gulp starter using Tailwind CSS.
- 🚀 Gatsby Starter - Gatsby starter using Tailwind CSS.
- 🚀 Gatsby Starter Simplicity - Gatsby starter using Tailwind CSS.
- 🚀 Gatsby Starter + TypeScript - Gatsby starter using Tailwind CSS and TypeScript.
- 🚀 Gatsby Starter + Emotion JS - Gatsby starter using Tailwind CSS and Emotion JS.
- 🚀 Gatsby Starter Opinionated - Gatsby starter using Tailwind CSS and opinionated goodies.
- 🚀 Create React App Boilerplate - CRA boilerplate using Tailwind CSS.
- 🚀 Create React App with PurgeCSS + Autoprefixer + CSSNano - CRA boilerplate using CSS Nano.
- 🚀 Dogpatch - WordPress starter using webpack, Vue, Babel and Tailwind CSS.
- 🚀 Next.js Starter - Next.js boilerplate using Tailwind CSS.
- 🚀 Sapper & Svelte Starter - Svelte boilerplate using Sapper, Tailwind CSS, Purge CSS, Prettier and ESLint.
- 🚀 Netlify Lambda Starter - Netlify Lambda boilerplate using Tailwind CSS.
- 🚀 Hugo Theme Starter with Tailwind CSS - Hugo theme starter using Tailwind CSS.
- 🚀 Eleventy Web Starter - Starter kit using Eleventy, Tailwind CSS, webpack and PostCSS.
- 🚀 Nanoc Starter - Nanoc starter using Tailwind CSS.
- 🚀 PostCSS and Browsersync Boilerplate - Boilerplate using CSS Nano.
- 🚀 ParcelJS + TypeScript Boilerplate - Boilerplate using Tailwind CSS, ParcelJS bundler and TypeScript.
- 🚀 VuePress Tailwind CSS Starter - A VuePress starter using Tailwind CSS.
- 🚀 Gatsby Serif - Gatsby’s serif theme using Tailwind CSS.
- 🚀 Eleventy Starter - Production-ready, SEO-friendly blog starter using Tailwind CSS.
- 🚀 Vite + React + Tailwind Starter - Boilerplate using Vite, React and Tailwind CSS.
- 🚀 Vite + React + TypeScript + Tailwind 3.x starter - GitHub Template for Vite, React + Tailwind 3.x + TypeScript.
- 🚀 Vite + Vue 3.x + Tailwind 2.x Starter - Starter template using Vite, Vue, Vue Router and Tailwind CSS.
- 🚀 Vite + Lit + Tailwind Starter - Boilerplate using Vite, Lit and Tailwind CSS.
- 🚀 Shopify Theme Lab - Shopify theme development starter using Vue and Tailwind CSS.
- 🚀 Starter Dashboard Layout - Dashboard layout using Tailwind CSS and Alpine JS.
- 🚀 Jekyll Landing Website Starter - Production ready, SEO-friendly, performant landing website boilerplate using Jekyll and Tailwind CSS.
- 🚀 Next JS Boilerplate - Boilerplate for Next.js and Tailwind CSS.
- 🚀 Vitailse - Opinionated Vite starter template with Vue 3, TypeScript and Tailwind CSS.
- 🚀 Vite-Boot - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.
- 🚀 AstroWind - Production ready and SEO-friendly template to start a website using Astro and Tailwind CSS.
- 🚀 Angular-Tailwind - Dashboard starter kit using Angular and Tailwind CSS.
- 🚀 Vue-Resume - Developer resume template with Tailwind CSS and Vue.
Learning
Legend: 💙 Official resource · 🧪 Sample · 🔧 Setup Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥 Cast
·
Contributions welcome! Read the contribution guidelines first.