Awesome tailwindcss

Awesome Tailwind CSS

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

 

Useful Links¶

Legend: 💙 Official resource

• 💙 Website - Official Tailwind CSS website.
• 💙 Repository - Official Tailwind CSS repository.
• 💙 Discussions - Official place to connect with other community members about Tailwind.
• 💙 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.
• Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.

IDE Extensions¶

Legend: 💙 Official resource

• 💙 IntelliSense for Code - IntelliSense extension for Visual Studio Code.
• Styled Snippets for Code - Snippet extension for Visual Studio Code.
• Headwind for Code - Class sorter extension for Visual Studio Code.
• Shades for Code - Color palette generator extension for Visual Studio Code.
• IntelliSense for Neovim - IntelliSense extension for Neovim.
• LSP support for Emacs - LSP support for Emacs.
• Tailwind CSS Explorer for Code - Explore the classes available in your project's Tailwind CSS setup.
• Tailwind CSS Highlight - Highlight utilities extension for Visual Studio Code.
• CSS to TailwindCSS converter for Code - CSS to Tailwind CSS converter extension for Visual Studio Code.

Plugins¶

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

• 💙🧩 Typography - Adds a prose class for beautiful typographic defaults.
• 💙💼 Aspect Ratio - Adds composable aspect ratio utilities.
• 💙 Forms - Adds better default styles to form elements.
• 🎨🧬 Theming - Theming using CSS variables, with dark mode support.
• 🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
• 🎨🧬 Multi Theme - Adds theme variants based on a single theme property.
• 🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
• 🎨🧬 Themeable - Adds multiple themes support for Tailwind CSS.
• 🎨🧬 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).
• 🎨💼 Accent - Adds accent colors for more dynamic and flexible color utilization.
• 💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
• 💼 Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.
• 💼 Image Rendering - Adds image-rendering utilities.
• 💼 Elevation - Adds Material UI elevation utilities.
• 💼 Writing Mode - Adds writing-mode utilities.
• 💼 Hyphens - Adds hyphens utilities.
• 💼 Border Gradients - Adds border-image gradient utilities.
• 💼 RFS - Adds RFS utilities.
• 💼 List Reset - Adds back the list-reset class that was removed prior to Tailwind CSS 1.0.
• 💼 Fluid - Adds fluid sizing utilities.
• 💼 Typography - Adds typography utilities.
• 💼 Triangle After - Adds CSS triangles utilities.
• 💼 Scrims - Adds scrims utilities.
• 💼 Truncate Multiline - Adds utilities to truncate multi-line text elements.
• 💼 CSS Logical Properties - Generate utilities for CSS Logical Properties.
• 💼 Tooltip Arrows After - Adds CSS utilities for tooltip arrows with configurable border and background.
• 💼 Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
• 💼 Bidirectional - Replace the core utilities to be bi-direction compatible.
• 💼 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.
• 💼 Downwind CSS Easings - Extends transition-timing-function utilities.
• 💼 Content Placeholder - Adds utilities for content placeholder images.
• 💼 No Scrollbar - Exposes scrollbar-none to visually hide a 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.
• 💼 TailwindCSS 3D - Adds 3D transform utilities and animations.
• 💼 Claymorphism - Adds clay utilities for creating claymorphism style.
• 🧬 Touch - Adds touch variants.
• 🧬 Localized - Adds variants based on the HTML lang attribute, to use utilities only with certain languages.
• 🧬 Padded Radius - Adds variants for matching nested border radii.
• 🧬 Fluid - Generates fl: variants.
• 🧬 Pseudo selectors - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
• 🧬 Container Queries - Adds CSS Container Query variants.
• 🧬 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).
• 🧩 Heropatterns - Adds Hero Patterns components.
• 🧩 Responsive Embed - Adds a responsive-embed component.
• 🧩 Bootstrap Tables - Adds table components based on Bootstrap's tables.
• 🧩 Card - Adds card components.
• 🧩 Skip link - Adds a Skip to main content accessible component.
• 🧩 Colors to CSS Variables - Exports color configuration to CSS Custom Properties.
• 🧩 CSS Variables - Exports configuration to CSS Custom Properties.
• 🧩 CSS Variables - Exports custom CSS variables (Dark Mode supported).
• 🧩 Perspective - Adds perspective utilities.

🛑 *The plugins below offer functionalities that are now fully or partially implemented in Tailwind CSS.*

- 🛑💼 [benface's gradients](https://github.com/benface/tailwindcss-gradients) - Adds gradient utilities. - 🛑💼 [lorisleiva's gradients](https://github.com/lorisleiva/tailwindcss-plugins/tree/master/gradients) - Adds background gradient utilities. - 🛑💼 [Visually Hidden](https://github.com/webdna/tailwindcss-visuallyhidden) - Adds screen reader utilities. - 🛑💼 [Object Fit](https://github.com/hendrikeng/tailwindcss-object-fit) - Adds `object-fit` utilities. - 🛑💼 [Object Position](https://github.com/hacknug/tailwindcss-object-position) - Adds `object-position` utilities. - 🛑💼 [Accessibility](https://github.com/jack-pallot/tailwindcss-accessibility) - Adds screen reader utilities. - 🛑💼 [Layout](https://github.com/benface/tailwindcss-layout) - Adds some layout utilities. - 🛑💼 [Grid](https://github.com/chrisrowe/tailwindcss-grid) - Adds CSS grids utilities. - 🛑💼 [Transforms](https://github.com/benface/tailwindcss-transforms) - Adds `transform` utilities. - 🛑💼 [benface's transitions](https://github.com/benface/tailwindcss-transitions) - Adds configurable transition utilities, with or without CSS variables. - 🛑💼 [webdna's transitions](https://github.com/webdna/tailwindcss-transition) - Adds configurable transition utilities. - 🛑💼 [glhd's transitions](https://github.com/glhd/tailwindcss-plugins) - Adds basic transition utilities. - 🛑💼 [Cursor Extended](https://github.com/hacknug/tailwindcss-cursor-extended) - Extends `cursor` utilities. - 🛑💼 [Font Variant Numeric](https://github.com/philippbosch/tailwindcss-font-variant-numeric) - Adds `font-variant-numeric` utilities. - 🛑💼 [Filters](https://github.com/benface/tailwindcss-filters) - Adds `filter` utilities. - 🛑💼 [CSS Filters](https://github.com/Larsklopstra/tailwindcss-css-filters) - Adds `filter` and `backdrop-filter` utilities with defaults. - 🛑💼 [Blend Mode](https://github.com/hacknug/tailwindcss-blend-mode) - Adds `blend-mode` utilities. - 🛑💼 [Colorize](https://github.com/philippbosch/tailwindcss-colorize) - Adds `filter` utilities. - 🛑💼 [Scroll Snap](https://github.com/innocenzi/tailwindcss-scroll-snap) - Adds `scroll-snap` utilities. - 🛑💼 [Scroll Behavior](https://github.com/lukewarlow/tailwind-scroll-behavior) - Adds `scroll-smooth` and `scroll-auto` classes to control smooth scrolling. - 🛑💼 [Accent Color](https://github.com/lukewarlow/tailwind-accent-color) - Adds accent color utilities. - 🛑💼 [Text Indent](https://github.com/hacknug/tailwindcss-text-indent) - Adds `text-indent` utilities. - 🛑💼 [Text Decoration Color](https://github.com/ahmadawais/tailwind-text-decoration-color) - Adds `text-decoration-color` utilities. - 🛑💼 [Downwind CSS Text Decoration](https://github.com/downwindcss/text-decoration) - Adds composable `text-decoration` utilities. - 🛑💼 [Capitalize first letter](https://github.com/riderx/capitalize-first-tailwind) - Adds `capitalize-first` utilities. - 🛑💼 [Aspect Ratio](https://github.com/webdna/tailwindcss-aspect-ratio) - Adds `aspect-ratio` utilities. - 🛑💼 [Shadow Outline Colors](https://github.com/octoper/tailwindcss-shadow-outline-colors) - Adds `box-shadow` utilities based on configured colors. - 🛑💼 [Alpha](https://github.com/bradlc/tailwindcss-alpha) - Adds alpha color variant utilities. - 🛑💼💙 [Line Clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp) - Provides utilities for visually truncating text after a fixed number of lines. - 🛑🧬 [Direction](https://github.com/RonMelkhior/tailwindcss-dir) - Adds `RTL` and `LTR` variants. - 🛑🧬 [Important](https://github.com/chasegiunta/tailwindcss-important) - Adds an `important` variant. - 🛑🧬🎨 [Prefers Dark Mode](https://github.com/javifm86/tailwindcss-prefers-dark-mode) - Adds variants based on the `prefers-color-scheme` media query. - 🛑🧬🎨 [Dark Mode](https://github.com/danestves/tailwindcss-darkmode) - Adds `dark` variants based on CSS classes. - 🛑🧬🎨 [Dark Mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) - Adds `dark` variants based on the `prefers-color-scheme` media query. - 🛑🧬 [CSS Alpha Colors](https://github.com/soueuls/tailwind-color-alpha) - Adds opacity variants to existing colors. - 🛑🧬 [Pseudo](https://github.com/Log1x/tailwindcss-pseudo) - Adds custom variants to Tailwind CSS's configuration. - 🛑🧩 [Spinner](https://github.com/aniftyco/tailwindcss-spinner) - Adds a spinner component. - 🛑🧩 [Spaced Items](https://github.com/n1kk/tailwindcss-spaced-items) - Adds `spaced` components that add fixed margins to all container items. - 🛑🧩💙 [Custom Forms](https://github.com/tailwindlabs/tailwindcss-custom-forms) - Adds better default styles to form elements.

Tools¶

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

• 🎨🌍🔧 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.
• 🎨🌍🔧 Ui Colors - Color palette generator for Tailwind CSS.
• 🎨🌍🔧 Tints - Color palette penerator and API for Tailwind CSS.
• 🎨🌍💼 Tailwind CSS v2 colors - Figma library with Tailwind CSS v2 colors.
• 🎨🔧💼 Colorkraken - Color shades generator for Tailwind CSS.
• 🎨🔧💼 babel-plugin-tailwind-dark - A Babel plugin to add custom dark class when compiling your code using Babel.
• 🌍🔧💼 Twind - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
• 🌍🔧 GPT-3 Tailwind CSS code generator - OpenAI GPT-3 powered Tailwind CSS code generator.
• 🌍🔧 tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
• 🌍🔧 brands-tail-color - Configuration generator using various brands' colors.
• 🌍🔧 Windframe - Tailwind CSS drag and drop builder to rapidly build and prototype websites.
• 🌍 Typography Playground - Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.
• 🌍💙 Play - Advanced online playground for Tailwind CSS.
• 🌍 Updrafts.app - Advanced online no-code drag and drop editor for Tailwind CSS.
• 🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.
• 🔼🌍🔧 Tailwindhelper - Visualize Tailwind CSS classes and unit converter.
• 🔼🌍 Tailwind Automatic Prefix Applicator - Tailwind classes' prefixer tool.
• 🔼🌍 CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
• 🔼 Tailwindo - Bootstrap to Tailwind CSS converter.
• 🔼 Tailupgrade - Conversion tool for upgrading HTML files from Tailwind CSS v0.x to v1.0.
• 🔼 Tailwind Shift - Upgrade tool for upgrading from Tailwind CSS v0.7 to v1.0.
• 🔼 RustyWind - CLI tool for sorting Tailwind CSS classes.
• 🔼 Windy - Browser extension to convert HTML elements to Tailwind CSS.
• 🅰 react-native-tailwindcss - React Native typing system.
• 💼 Gatsby Plugin - Tailwind CSS integration for Gatsby.
• 💼 Gridsome Plugin - Tailwind CSS integration for Gridsome.
• 💼 Alfred Workflow - Fast Tailwind CSS documentation search application.
• 💼 ng-tailwindcss - CLI tool for integrating Tailwind CSS into Angular-CLI projects.
• 💼 vue-cli-plugin-tailwind - Vue CLI plugin that adds Tailwind CSS to a project.
• 💼 Tailwind CSS Figma Kit - Figma Kit for Tailwind CSS.
• 💼 Tailwind CSS Figma UI Design Kit - Figma UI Design Kit for Tailwind CSS.
• 💼 Tailwind CSS Figma Plugin - Figma plugin that integrates Tailwind CSS.
• 💼 @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
• 💼 preact-cli-tailwind - Tailwind CSS integration for Preact.
• 💼 tailwind-classes-sorter - NPM library which provides a utility to sort Tailwind CSS classes.
• 💼 prettier-plugin-tailwind - Prettier plugin that sorts class lists.
• 💼 tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
• 💼🔧 Zeplin Config & Class generator - Zeplin extension that generates Tailwind configurations.
• 💼🔧 @tailwindcssinjs/macro - Babel macro that transforms Tailwind CSS classes into objects for CSS-in-JS libraries.
• 💼🔧 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.
• 💼🔧 Laravel Form Components - Blade form components using Tailwind CSS Custom Forms.
• 💼 @ngneat/tailwind - Tailwind CSS integration for Angular.
• 💼 Gust - Drag and drop page builder for WordPress.
• 💼 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.
• 💼🌍 Inspect Flow - The complete developer tool for Tailwind CSS.
• 💼 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.
• 💼🌍 Supertweak - Visual devtools for Tailwind CSS.
• 💼 Tailscan - Ultimate devtools for Tailwind CSS v3 with ability to inspect and convert CSS to Tailwind CSS classes.
• 💼 Raycast Extension - Search classes, documentation and colors in Raycast Launcher.
• 💼 DivMagic - Copy any web element and style as Tailwind CSS component.
• 🔧 re-tailwind - ReasonML utility that generates Tailwind classes.
• 🔧 Protoship Codegen - Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.
• 🔧 create-tailwind-plugin - Plugin scaffolder for Tailwind CSS.
• 🔧 EasyWind - Tailwind CSS project generator, compiler/watcher and livereload server, all in one.
• 🚀 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
• 🌍 Tailwind Cheat Sheet - Tailwind CSS class names cheat sheet.
• 🌍 Tailwind Cheat Sheet - Tailwind CSS class names in one single file.
• 🌍 Tailwind Cheat Sheet - Tailwind CSS class names, variants and directives cheat sheet.
• 🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
• 🌍 Tailwind Cheat Sheet - Tailwind CSS utility class names in a searchable interface.
• 🌍🔧 Loopple Builder - Dashboard drag-and-drop builder for Tailwind CSS.
• 🌍🔧 Tailwind Grid Generator - Drag and drop Tailwind CSS grid generator.
• 🌍🔧 Tailwind Box Shadows Generator - Box Shadows generator.

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.
• 📚 VueTailwind - Vue.js UI library using Tailwind CSS.
• 📚 Vechai UI - High-quality accessible React components with the built-in dark mode 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.
• 🧩 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.
• 🧩 Windstrap - Tailwind CSS with Bootstrap JS.
• 🧩 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.
• 🧩 Sira UI - Customizable and accessible design system which provides TailwindCSS component class name library to build modern UI.
• 🧩 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.
• 📁 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.

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.
• 🚀 Seminyak Hugo Theme - Hugo 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.
• 🚀 Tailwind sites - Free Tailwind CSS site templates for your next project.

Open-Source Projects¶

• Goodwork - Project Management & Collaboration tool.
• Todolist - To-do list application using Tailwind CSS.
• LeagueStats - Statistics website for League of Legends players.
• SapperCommerce - E-commerce storefront using Svelte & Tailwind CSS.
• Misiki Books - Book shop using Vue + Moltin + Tailwind CSS.
• Ubuntu 20.04 - An Ubuntu desktop using React.js + Tailwind CSS.
• Angular Spotify - Spotify client built with Angular, Nx Workspace and Tailwind CSS.
• GitProfile - Automatic portfolio builder based on GitHub profiles, built with React.js and Tailwind CSS.

Learning¶

Legend: 💙 Official resource · 🧪 Sample · 🔧 Setup Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥 Cast

• 💙🧪 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 - Navbar made with Vue.js and Tailwind CSS.
• 🧪 “Open” landing page - “Open” landing page template by Cruip built with Tailwind CSS Boilerplate.
• 🔧 Testing Tailwind CSS plugins with Jest - How to test Tailwind CSS plugins with Jest.
• 🔧 Tailwind CSS with CSS-in-JS - How to use Tailwind CSS with CSS-in-JS.
• 🔧 Tailwind CSS in a Laravel Project - How to setup Tailwind CSS in a Laravel project.
• 🔧 Tailwind CSS with Ember - How to add Tailwind CSS to an Ember application.
• 🔧 Sage WordPress theme and Tailwind CSS - How to setup Tailwind CSS in Sage.
• 🔧 Tailwind CSS with GatsbyJS - How to use Tailwind CSS with Gatsby.
• 🔧 Tailwind CSS with Phoenix 1.4 - How to setup Tailwind CSS in Phoenix 1.4.
• 🔧 Extend Tailwind CSS - How to Extend Tailwind CSS.
• 🎬 Rebuilding Laravel.io - Rebuilding Laravel.io with Tailwind CSS.
• 🎬 Rebuilding Coinbase - Rebuilding Coinbase with Tailwind CSS [see the Codepen].
• 🎬 Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS [see the CodePen].
• 🎬 Rebuilding YouTube - Rebuilding YouTube with Tailwind CSS.
• 🎬 Rebuilding Netlify - Rebuilding Netlify with Tailwind CSS.
• 🎬 Rebuilding Resolute - Rebuilding Resolute with Tailwind CSS.
• 🎬 Let's Build: Movie Production Landing Page - Building a movie production landing page with Tailwind CSS.
• 🎬 Lets Build: Responsive Navbar - Building a responsive navbar with Tailwind CSS.
• 🎬 Let's Build: Dribbble Shot - Dribbble shot with Tailwind CSS.
• 💙🎬 Tailwind CSS: From Zero to Production - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.
• 🎬 Let's Build: Tweet component - Building a Tweet component with Tailwind CSS.
• 🎬 10 Tailwind CSS Tips and Tricks - 10 Tailwind CSS tricks you should know.
• 🎬 Responsive Framer Motion with Tailwind CSS - Learn how CSS variables can bridge the gap between Framer Motion and Tailwind CSS.
• 🎓 Modal Dialog - Creating a modal dialog with Tailwind CSS.
• 🎓 Building real-world UIs using Tailwind CSS - Building UIs of Shopify, Spotify, Netlify and Atlassian.
• 🎓 Login Page (PingPing) - Creating a login page with Tailwind CSS.
• 🎓 Login Page - Creating a login page with Tailwind CSS.
• 🎓 Vue.js Component with Tailwind and Laravel - Building a Vue.js component in a Laravel project.
• 🎓 Vue.js Modal - Building a customizable modal with Tailwind CSS and Vue.js.
• 🎓 Navigation - Building a navigation with Tailwind CSS.
• 🎓 Forms with Tailwind CSS - How to style a form with Tailwind CSS.
• 🎓 Photo gallery with CSS grids - Building a photo gallery with CSS grids and Tailwind CSS.
• 🎓 Rebuilding Bartik - Rebuilding Bartik (Drupal's default theme) with Vue.js and Tailwind CSS.
• 🎓 Rebuilding Airbnb's Home Page - Rebuilding Airbnb's Home Page with Tailwind CSS.
• 🎓 Typographic defaults in Tailwind CSS
• 🎓 Create a responsive navigation menu in Tailwind CSS
• 🎥 Laracasts Weekly Stream: Tailwind
• 🎥 More experimentation with Tailwind CSS
• 🎥 Rebuilding Spotify
• 🎥 Rebuilding Discord
• 🎥 Rebuilding Meetup

·

_{Contributions welcome! Read the contribution guidelines first.}