aniftyco/awesome-tailwindcss

Tools

🔼🌍🔧 Tailwindhelper - Visualize Tailwind CSS classes and unit converter.

Plugins

💼 Full Bleed Background and Bordersstars3 - Provides utilities for extended backgrounds and borders.

Starters & Themes

🚀 AstroWindstars193 - Production ready and SEO-friendly template to start a website using Astro and Tailwind CSS.

Plugins

💼 Hyphensstars6 - Adds hyphens utilities.

Tools

💼 Impulse.dev – UI editor for Tailwind CSS and React that edits your code.

Starters & Themes

🚀 Vite + Lit + Tailwind Starterstars9 - Boilerplate using Vite, Lit and Tailwind CSS.

Tools

💼 Tails Devtoolsstars130 - All-in-one browser extension for Tailwind CSS.

UI Libraries, Components & Templates

📚 Headless UI Float - Floating UI integration for Headless UI.

📚 Xtend UI - Tailwind CSS components with advanced interactions and animations.

Plugins

💼 Grid Areasstars36 - Adds grid-areas and grid-area utilities.

Tools

💼🔧 tailwindcss-webpack-pluginstars9 - Out-of-the-box Tailwind CSS, supports "Design in Devtools" mode and visualizes Tailwind CSS configuration.

IDE Extensions

Tailwind CSS Highlight - Highlight utilities extension for Visual Studio Code.

Tools

🎨🌍🔧 Ui Colors - Color palette generator for Tailwind CSS.

Open-Source Projects

GitProfilestars432 - Automatic portfolio builder based on GitHub profiles, built with React.js and Tailwind CSS.

Tools

💼 twined-componentsstars6 - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.

Open-Source Projects

Angular Spotifystars2.1k - Spotify client built with Angular, Nx Workspace and Tailwind CSS.

Starters & Themes

🚀 Vite-Bootstars43 - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.

Plugins

🧬 FormKit - Adds variants for input and form states for FormKit.

Plugins

💼 Background Unsplashstars11 - Apply unsplash.com images as background.

UI Libraries, Components & Templates

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

UI Libraries, Components & Templates

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

UI Libraries, Components & Templates

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

UI Libraries, Components & Templates

📁 Cruip - Beautifully designed HTML, React, and Vue.js templates.

Starters & Themes

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

UI Libraries, Components & Templates

📚 Svelte Headless UIstars998 - Unofficial Svelte port of Headless UI.

Plugins

🎨🧬 Themerstars56 - Adds theming support for Tailwind CSS with CSS variables and variants.

UI Libraries, Components & Templates

🧩 HyperUI - Open source marketing and ecommerce Tailwind CSS components.

Plugins

🧬 Container Queriesstars64 - Adds CSS Container Query variants.

Tools

💼 Tailwind CSS Figma UI Design Kit - Figma UI Design Kit for Tailwind CSS.

🌍 Tailwind Cheat Sheet - Tailwind CSS utility class names in a searchable interface.

UI Libraries, Components & Templates

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

Tools

💼🌍 Inspect Flow - The complete developer tool for Tailwind CSS.

Plugins

🎨🧬 Themeablestars30 - Adds multiple themes support for Tailwind CSS.

Plugins

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

UI Libraries, Components & Templates

🧩 Layouts for Tailwind - Layouts and UI Patterns for Tailwind CSS.

Learning

🔧 Tailwind CSS with Emberstars22 - How to add Tailwind CSS to an Ember application.

UI Libraries, Components & Templates

📁 Red Pixel Themes - Paid, developer-friendly templates made with Tailwind CSS.

Starters & Themes

🚀 Vitailsestars100 - Opinionated Vite starter template with Vue 3, TypeScript and Tailwind CSS.

UI Libraries, Components & Templates

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

📁 Material Tailwind Kit React - Free Tailwind CSS and React UI kit.

📁 Material Tailwind Dashboard React - Free Tailwind CSS and React admin template.

UI Libraries, Components & Templates

📚 a17t - Atomic design toolkit built to extend Tailwind CSS.

📚 tails-uistars181 - React UI library using Tailwind CSS.

📚 tailsstars18 - Hand-crafted templates and components using Tailwind CSS.

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

📁 EasyTailwind - Freemium, easily customizable templates made with Tailwind CSS.

Tools

💼 clbstars65 - clb (class list builder) is a utility function that builds a class list based on a Stitches like API.

UI Libraries, Components & Templates

🧩 Tailwind Typeaheadstars14 - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.

Tools

🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.

UI Libraries, Components & Templates

📚 Flowbite - Open-source component library built with Tailwind CSS.

🧩 Tailwind Datepickerstars98 - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.

UI Libraries, Components & Templates

📁 OhMySMTP Templatesstars143 - Set of Transactional HTML Email Templates, built with Maizzle

Starters & Themes

🚀 Next JS Boilerplatestars2.5k - Boilerplate for Next.js and Tailwind CSS.

Plugins

💼 Fluid Typestars108 - Adds fluid type (font-size) utilities.

Tools

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

Starters & Themes

🚀 Jekyll Starter - Jekyll starter using Tailwind CSS

UI Libraries, Components & Templates

📁 Tailminstars42 - Admin dashboard built with Vue.js and Tailwind CSS.

Plugins

🧩 Perspectivestars74 - Adds perspective utilities.

UI Libraries, Components & Templates

📚 Vechai UI - High-quality accessible React components with the built-in dark mode using Tailwind CSS.

Tools

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

Starters & Themes

📟 new-tailwind-appstars233 - Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic Tailwind CSS apps.

Starters & Themes

📟 Next.js PWAstars64 – CLI that generate boilerplate code of Next.js PWA along with Tailwind CSS integration.

UI Libraries, Components & Templates

📚 Tailwind Elements - Huge collection of free components, mobile-friendly thanks to Bootstrap 5.

Tools

💼 Gust - Drag and drop page builder for WordPress.

Tools

🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.

Tools

💼 Tailwind CSS Figma Kitstars709 - Figma Kit for Tailwind CSS.

💼 Tailwind CSS Figma Pluginstars252 - Figma plugin that integrates Tailwind CSS.

Starters & Themes

🚀 Gatsby Starter + TypeScriptstars76 - Gatsby starter using Tailwind CSS and TypeScript.

Starters & Themes

🚀 Jekyll Landing Website Starterstars62 - Production ready, SEO-friendly, performant landing website boilerplate using Jekyll and Tailwind CSS.

Open-Source Projects

Ubuntu 20.04stars2.6k - An Ubuntu desktop using React.js + Tailwind CSS.

Learning

💙🎬 Tailwind CSS: From Zero to Production - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.

Plugins

🧩 CSS Variablesstars85 - Exports custom CSS variables (Dark Mode supported).

UI Libraries, Components & Templates

📁 Resumestars84 - A stylized resume template built with Tailwind CSS, featuring a nifty hero-pattern background and custom font.

Tools

🔼 Windy - Browser extension to convert HTML elements to Tailwind CSS.

UI Libraries, Components & Templates

🧩 Tailwind Cardsstars432 - Growing collection of text/image cards.

Plugins

🎨🧬 Theme Variantsstars133 - Adds theme variants based on media queries and/or CSS selectors.

Useful Links

💙 Just-in-timestars2.2k - Just-in-time compiler for Tailwind CSS.

UI Libraries, Components & Templates

🧩 Litepie Date pickerstars311 - A date range picker component for Vue.js and Tailwind CSS.

Plugins

💼 No Scrollbarstars6 - Exposes scrollbar-none to visually hide a scrollbar.

Tools

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

Plugins

💼 Content Placeholderstars98 - Adds utilities for content placeholder images.

Learning

🔧 Web2Tailwind - How to build web components with Tailwind CSS with AlpineJS.

Plugins

💼 Downwind CSS Easingsstars2 - Extends transition-timing-function utilities.

Learning

🎓 Create a responsive navigation menu in Tailwind CSS

Plugins

🧬 Pseudo selectorsstars34 - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.

UI Libraries, Components & Templates

🧩 Mamba UI - Free Tailwind CSS components, sections and templates.

UI Libraries, Components & Templates

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

Tools

🌍 Updrafts.app - Advanced online no-code drag and drop editor for Tailwind CSS.

Plugins

💼 Scrollbar Hidestars96 - Adds scrollbar-hide class for visual hide scrollbar.

UI Libraries, Components & Templates

🧩 Daisy UIstars14.5k - UI Components for Tailwind CSS.

Plugins

💼 Bidirectionalstars8 - Replace the core utilities to be bi-direction compatible.

Tools

💼 @ngneat/tailwindstars601 - Tailwind CSS integration for Angular.

🌍🔧 brands-tail-color - Configuration generator using various brands' colors.

Tools

🔧 create-tailwind-pluginstars16 - Plugin scaffolder for Tailwind CSS.

UI Libraries, Components & Templates

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

Learning

🎓 Typographic defaults in Tailwind CSS

Tools

💼 tailwindcss-railsstars1.1k - Gem for using Tailwind CSS with Rails' asset pipeline.

Plugins

🧬 Marker - Provides utilities for styling lists and <summary> markers.

💙💼 Line Clampstars856 - Provides utilities for visually truncating text after a fixed number of lines.

Tools

🎨🔧💼 babel-plugin-tailwind-darkstars5 - A Babel plugin to add custom dark class when compiling your code using Babel.

UI Libraries, Components & Templates

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

Tools

🎨🌍🔧 Gradient Designer - Generate gradients for Tailwind 2.0+.

Starters & Themes

🚀 Starter Dashboard Layoutstars173 - Dashboard layout using Tailwind CSS and Alpine JS.

UI Libraries, Components & Templates

📁 Petrastars24 - Free landing page template built with Nuxt.js & Tailwind CSS.

Tools

🎨🔧💼 Colorkrakenstars12 - Color shades generator for Tailwind CSS.

UI Libraries, Components & Templates

🧩 Windstrap - Tailwind CSS with Bootstrap JS.

Starters & Themes

🚀 Shopify Theme Labstars617 - Shopify theme development starter using Vue and Tailwind CSS.

Starters & Themes

🚀 Vite + Vue 3.x + Tailwind 2.x Starterstars1k - Starter template using Vite, Vue, Vue Router and Tailwind CSS.

IDE Extensions

Tailwind CSS Explorer for Code - Explore the classes available in your project's Tailwind CSS setup.

Plugins

💙💼 Aspect Ratiostars731 - Adds composable aspect ratio utilities.

💙 Formsstars2.6k - Adds better default styles to form elements.

Tools

🎨🌍💼 Tailwind CSS v2 colors - Figma library with Tailwind CSS v2 colors.

UI Libraries, Components & Templates

📁 V-Dashboardstars746 - Dashboard starter template built with Vue 3 and Tailwind CSS.

Starters & Themes

🚀 Vite + React + Tailwind Starterstars191 - Boilerplate using Vite, React and Tailwind CSS.

Useful Links

💙 Headless UIstars16.9k - Completely unstyled, fully accessible UI components.

UI Libraries, Components & Templates

🧩📁 Jakarta LTEstars128 - Admin template using Tailwind CSS.

UI Libraries, Components & Templates

📁 Resumestars37 - Simple resume with Tailwind CSS.

📁 Simple Lightstars1.5k - Free landing page template built with React & Tailwind CSS.

Tools

🎨🌍🔧 Palettolithic - Generates harmonius color palettes based on one color.

UI Libraries, Components & Templates

🧩 Gust UI - Sleek Tailwind CSS components for web applications in React and HTML.

Tools

💼 tailwind-classes-sorterstars18 - NPM library which provides a utility to sort Tailwind CSS classes.

💼 prettier-plugin-tailwindstars426 - Prettier plugin that sorts class lists.

UI Libraries, Components & Templates

🧩 lofi ui - Low-fidelity Tailwind CSS components.

Tools

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

Useful Links

💙 Play - Advanced online playground for Tailwind CSS.

Tools

🌍💙 Play - Advanced online playground for Tailwind CSS.

UI Libraries, Components & Templates

💙📚 Headless UIstars16.9k - Completely unstyled, fully accessible UI components.

Tools

🌍🔧 tail-animista - Configurable custom animation utilities generator for Tailwind CSS.

Tools

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

Tools

🌍 tailzilla.app - Online playground for Tailwind CSS.

Plugins

💼 Leading Trimstars48 - Adds utilities to trim text whitespace, using Capsizestars946.

Starters & Themes

🚀 Eleventy Starterstars243 - Production-ready, SEO-friendly blog starter using Tailwind CSS.

Tools

🎨🌍🔧 Grayscale Design - A Luminance-based color palette generator.

Tools

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

Tools

🌍 Typography Playground - Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.

Tools

🎨🌍🔧 Tailwind Color Explorer - Color explorer for Tailwind CSS.

Useful Links

💙 Website - Official Tailwind CSS website.

💙 Repositorystars61k - Official Tailwind CSS repository.

💙 Discussions - Official place to connect with other community members about Tailwind.

💙 Tailwind UI - Component library made with Tailwind CSS.

💙 Heroicons - Beautiful, hand-crafted SVG icons.

Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.

Built With Tailwind - Community-driven collection of awesome websites built with Tailwind CSS.

IDE Extensions

💙 IntelliSense for Code - IntelliSense extension for Visual Studio Code.

Styled Snippets for Code - Snippet extension for Visual Studio Code.

Headwind for Codestars1.2k - Class sorter extension for Visual Studio Code.

Shades for Codestars55 - Color palette generator extension for Visual Studio Code.

IntelliSense for Neovimstars334 - IntelliSense extension for Neovim.

Plugins

💙🧩 Typographystars2.9k - Adds a prose class for beautiful typographic defaults.

🎨🧬 Themingstars454 - Theming using CSS variables, with dark mode support.

🎨🧬 Multi Themestars463 - Adds theme variants based on a single theme property.

🎨🧬 Theme Swapperstars133 - Theming using CSS variables, with media queries support.

💼 Custom Nativestars67 - Leverages Tailwind CSS's configuration to allow the creation of utilities.

💼 Image Renderingstars74 - Adds image-rendering utilities.

💼 Elevationstars133 - Adds Material UI elevation utilities.

💼 Writing Modestars9 - Adds writing-mode utilities.

💼 Border Gradientsstars173 - Adds border-image gradient utilities.

💼 RFSstars41 - Adds RFS utilities.

💼 List Resetstars1 - Adds back the list-reset class that was removed prior to Tailwind CSS 1.0.

💼 Fluidstars107 - Adds fluid sizing utilities.

💼 Typographystars250 - Adds typography utilities.

💼 Triangle Afterstars19 - Adds CSS triangles utilities.

💼 Scrimsstars37 - Adds scrims utilities.

💼 Truncate Multilinestars90 - Adds utilities to truncate multi-line text elements.

💼 CSS Logical Propertiesstars19 - Generate utilities for CSS Logical Properties.

💼 Tooltip Arrows Afterstars39 - Adds CSS utilities for tooltip arrows with configurable border and background.

💼 Bidirectionalstars270 - Adds utilities for creating multilingual bidirectional layouts.

💼 Background SVGstars16 - Inject SVGs as background images with color variants.

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

💼 Bootstrap Gridstars111 - Generates Bootstrap's style flexbox grid system.

🧬 Touchstars41 - Adds touch variants.

🧬 Localizedstars7 - Adds variants based on the HTML lang attribute, to use utilities only with certain languages.

🧬 Padded Radiusstars13 - Adds variants for matching nested border radii.

🧬 Fluidstars26 - Generates fl: variants.

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

🧩 Heropatternsstars147 - Adds Hero Patterns components.

🧩 Responsive Embedstars83 - Adds a responsive-embed component.

🧩 Bootstrap Tablesstars94 - Adds table components based on Bootstrap's tables.

🧩 Cardstars34 - Adds card components.

🧩 Skip linkstars13 - Adds a Skip to main content accessible component.

🧩 Colors to CSS Variablesstars27 - Exports color configuration to CSS Custom Properties.

🧩 CSS Variablesstars130 - Exports configuration to CSS Custom Properties.

Tools

🎨🌍🔧 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.

🌍🔧 GPT-3 Tailwind CSS code generator - OpenAI GPT-3 powered Tailwind CSS code generator.

🌍🔧 Stitches - Template generator with Tailwind (online).

🌍 tailwind.run - Tailwind CSS fiddle with built-time features (online).

🔼🌍 Tailwind Automatic Prefix Applicator - Tailwind classes' prefixer tool.

🔼 Tailwindostars923 - Bootstrap to Tailwind CSS converter.

🔼 Tailupgradestars6 - Conversion tool for upgrading HTML files from Tailwind CSS v0.x to v1.0.

🔼 Tailwind Shiftstars113 - Upgrade tool for upgrading from Tailwind CSS v0.7 to v1.0.

🔼 RustyWindstars262 - CLI tool for sorting Tailwind CSS classes.

🅰 react-native-tailwindcssstars544 - React Native typing system.

🅰 typed-tailwindstars416 - TypeScript typings for Tailwind CSS.

💼 Gatsby Pluginstars46 - Tailwind CSS integration for Gatsby.

💼 Gridsome Plugin