awesome-tailwindcss

💙 - Official Tailwind CSS website

Repository

💙 - Official Tailwind CSS repository

💙 - Component library made with Tailwind CSS

Headless UI

💙 - Completely unstyled, fully accessible UI components

💙 - Beautiful, hand-crafted SVG icons

💙 - Advanced online playground for Tailwind CSS

💙 - Official Discord server to connect with other community members about Tailwind CSS

Weekly newsletter about all things Tailwind CSS

💙 - Provides IntelliSense in Visual Studio Code

LSP support for Emacs

LSP support for Emacs

Highlights utility classes in Visual Studio Code

CSS to TailwindCSS converter for Code

Converts CSS to Tailwind CSS in Visual Studio Code

Editor support for VS2022

IntelliSense, linting, sorting, and more in Visual Studio 2022

Typography

💙🧩 - Adds a 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 colors for more dynamic and flexible color utilization

Radix

💼🧬 - Adds utilities and variants for styling Radix UI state

Image Rendering

💼 - Adds utilities

Elevation

💼 - Adds utilities

RFS

💼 - Adds utilities

Bidirectional

💼 - Adds utilities for creating multilingual bidirectional layouts

Background SVG

💼 - Inject SVGs as background images with color variants

Background Unsplash

💼 - Apply images as background

Brand Colors

💼 - Adds various brand colors for background, border and text

Bootstrap Grid

💼 - Generates Bootstrap's style flexbox grid system

Dot & Grid Backgrounds

💼 - Adds and classes to add easy-to-customize grid and dot pattern backgrounds with just CSS

Leading Trim

💼 - Adds utilities to trim text whitespace, using

Scrollbar Hide

💼 - Adds class for visual hide scrollbar

Fluid Type

💼 - Adds fluid type ( ) utilities

Grid Areas

💼 - Adds and utilities

Full bleed background and borders

💼 - Provides utilities for extended backgrounds and borders

CSS Filter Order

💼 - Adds utilities for changing the order of filters in the generated CSS

Tailwind CSS 3D

💼 - Adds 3D utilities and animations

Claymorphism

💼 - Adds utilities for creating claymorphism style

Fluid

💼🧬🧩 - Adds fluid versions of every built-in utility

FormKit

🧬 - Adds variants for input and form states for FormKit

Htmx

🧬 - Adds variants for styling on events

Quantity Queries

🧬 - Adds variants for using quantity queries

Debug screens

🧩 - Adds a component that shows the currently active screen (responsive breakpoint)

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

Prettier plugin

💙💼 - Official Tailwind CSS plugin for Prettier

🎨🌍🔧 - Color palette generator for Tailwind CSS

🎨🌍🔧 - Color shades generator for Tailwind CSS

🎨🌍🔧 - Color palette generator that outputs Tailwind CSS configuration files

🎨🌍🔧 - Color configuration generator for Tailwind CSS

🎨🌍🔧 - Color explorer for Tailwind CSS

🎨🌍🔧 - AI palette generator, trained with the Tailwind CSS palette

🎨🌍🔧 - Generate gradients for Tailwind 2.0+

🎨🌍🔧 - A Luminance-based color palette generator

🎨🌍🔧 - Collection of pre-configured Tailwind CSS gradients with directional options

🎨🌍🔧 - Generates harmonious color palettes based on one color

🎨🌍🔧 - Create perfect Tailwind CSS gradients with zero lines of code

🎨🌍🔧 - Color palette generator and API for Tailwind CSS

🎨🌍🔧 - Cheat sheet for Tailwind CSS colors

🎨🌍🔧 - Collection of gradients using Tailwind CSS classes

🎨🌍🔧 - Extend Tailwind CSS color palettes with additional shades

🎨🌍🔧 - Create fine-tuned WCAG accessible Tailwind CSS color palettes

Twind

🌍🔧💼 - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time

🌍🔧 - Configurable custom animation utilities generator for Tailwind CSS

🌍🔧 - Configuration generator using various brands' colors

🌍 - Tool for trying different Google Fonts combinations with the Tailwind CSS typography plugin

🌍 - Beautifully designed Tailwind CSS UI blocks

🔼🌍🔧 - Visualize Tailwind CSS classes and unit converter

🔼🌍 - Tailwind classes' prefixer tool

🔼🌍 - Converts CSS to Tailwind CSS by suggesting classes that best match

🔼🌍 - 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

🚀 - 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 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

💼 - Search classes, documentation and colors in Raycast Launcher

💼 - Copy any web element and style as Tailwind CSS component

💼 - Smart tools for Tailwind CSS as a browser extension

🌍 - Tailwind CSS class names in a searchable page

🌍🔧 - Drag and drop Tailwind CSS grid generator

🌍🔧 - Box Shadows generator

💰🌍🔧 - Tailwind CSS drag and drop builder to rapidly build and prototype websites

🌍 - The most used Tailwind classes, precompiled, with no build step

🎨🔧 - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui

💙🧩 - Component library made with Tailwind CSS

Headless UI

💙📚 - Completely unstyled, fully accessible UI components

💙📁 - Beautiful, accessible application UI kit for React

VueTailwind

📚 - Vue.js UI library using Tailwind CSS

📚 - Open-source component library built with Tailwind CSS

📚 - 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

📚 - Tailwind CSS components with advanced interactions and animations

📚 - Floating UI integration for Headless UI

📚 - Set of fully customizable Vue components

📚 - Modern UI framework for Tailwind CSS

📚 - Massive directory of 500+ Tailwind templates, starters and UI kits

📚 - Open source directory of hand-picked free and premium Tailwind templates & Starters

📚 - Curated Tailwind CSS components, templates, UI kits, resources, tools & more

📚 - Mobile web component library based on Svelte and Tailwind CSS

📚 - Lightweight library to create reusable React + Tailwind CSS components in one line

📚 - React library to build charts and dashboards with Tailwind CSS

📚 - Open-source Tailwind CSS components library for any needs

📚🧩 - Open-source components library for Tailwind CSS

🧩 - 60+ different ready to use Tailwind CSS blocks

🧩 - Community-driven Tailwind CSS component repository

🧩 - Templates, components and resources

🧩 - Beautiful Tailwind CSS components that support RTL languages

Tailwind Cards

🧩 - Growing collection of text/image cards

🧩📁 - Collection of templates and components

🧩📁 - React UI templates and components built using Tailwind CSS

Jakarta LTE

🧩📁 - Admin template using Tailwind CSS

🧩📁 - Handcrafted, free and premium Tailwind CSS themes and components

🧩 - Collection of basic UI components built on Tailwind CSS

🧩 - Switches using jQuery and Tailwind CSS

🧩 - Framework-agnostic, Vue.js, React and Angular components

🧩 - Collection of more than 120 layout blocks and components built with Tailwind CSS

Daisy UI

🧩 - UI Components for Tailwind CSS

🧩 - Free multi-purpose UI kit, built with Tailwind CSS

🧩 - 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

🧩 - Easy to use components library for Tailwind CSS and Material Design

🧩 - Layouts and UI Patterns for Tailwind CSS

🧩 - Open source marketing and ecommerce Tailwind CSS components

🧩 - Open source collection of animation snippets made for Tailwind CSS

🧩 - Large collection of Tailwind CSS UI components (700+)

🧩 - Open source UI Components and Marketing Elements made with Tailwind CSS

🧩 - Clean, modern and beautiful Tailwind CSS components

🧩 - Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app

🧩 - Alpine and Tailwind CSS UI library

🧩 - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native

🧩 - Set of 161 elements & layouts made with Tailwind CSS and Alpine.js

🧩 - Free library of Tailwind CSS examples

🧩 - Re-usable components built using Radix UI and Tailwind CSS

🧩 - Rich styled UI components

🧩 - Plug-n-play UI component library for Tailwind CSS & Alpine JS

🧩 - React motion components built with Tailwind CSS and Framer Motion

📁 - Open-source Tailwind CSS and Vue.js UI kit

📁 - Freemium, easily customizable templates made with Tailwind CSS

📁 - Multi theme, completely accessible dashboard template

Tailwind Admin

📁 - Administration panel template with Tailwind CSS

📁 - 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

📁 - Free Tailwind CSS and React UI kit

📁 - Free Tailwind CSS and React admin template

Admin One Vue 3

📁 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support

📁 - 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

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

🚀 - Boilerplate using Vite, React and Tailwind CSS

Vite + React + TypeScript + Tailwind 3.x starter

🚀 - GitHub Template for Vite, React + Tailwind 3.x + TypeScript

🚀 - 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

Plugin Examples

💙🧪 - Official plugin examples

Tailwind Dark Mode Theme Switcher

🧪 - Switching themes with CSS Custom Properties and Tailwind CSS

Acquia

🧪 - Acquia's hosting dashboard rebuilt with Vue.js and Tailwind CSS

🧪 - Navbar made with Vue.js and Tailwind CSS

“Open” landing page

🧪 - “Open” landing page template by Cruip built with Tailwind CSS Boilerplate

🔧 - How to test Tailwind CSS plugins with Jest

🔧 - How to use Tailwind CSS with CSS-in-JS

🔧 - How to setup Tailwind CSS in a Laravel project

Tailwind CSS with Ember

🔧 - How to add Tailwind CSS to an Ember application

🔧 - How to setup Tailwind CSS in Sage

🔧 - How to use Tailwind CSS with Gatsby

🔧 - How to setup Tailwind CSS in Phoenix 1.4

🔧 - How to Extend Tailwind CSS

🎬 - Rebuilding Laravel.io with Tailwind CSS

🎬 - Rebuilding Coinbase with Tailwind CSS (see the )

🎬 - Rebuilding Twitter with Tailwind CSS (see the )

🎬 - Rebuilding YouTube with Tailwind CSS

🎬 - Rebuilding Netlify with Tailwind CSS

🎬 - Rebuilding Resolute with Tailwind CSS

🎬 - Building a movie production landing page with Tailwind CSS

🎬 - Building a responsive navbar with Tailwind CSS

🎬 - Dribbble shot with Tailwind CSS

💙🎬 - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment

🎬 - Building a Tweet component with Tailwind CSS

🎬 - 10 Tailwind CSS tricks you should know

🎬 - Learn how CSS variables can bridge the gap between Framer Motion and Tailwind CSS

🎓 - Creating a modal dialog with Tailwind CSS

Building real-world UIs using Tailwind CSS

🎓 - Building UIs of Shopify, Spotify, Netlify and Atlassian

🎓 - Creating a login page with Tailwind CSS

🎓 - Building a navigation with Tailwind CSS

🎓 - How to style a form with Tailwind CSS

🎓 - Building a photo gallery with CSS grids and Tailwind CSS

🎓 - Rebuilding Bartik (Drupal's default theme) with Vue.js and Tailwind CSS

🎓 - Rebuilding Airbnb's Home Page with Tailwind CSS

🎓

🎓

🎥

🎥

🎥

🎥

🎥