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
- Open-Source Projects
- Learning
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.
- π Just-in-time - Just-in-time compiler for Tailwind CSS.
- Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
- Built With Tailwind - Community-driven collection of awesome websites built with 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.
- Tailwind CSS Explorer for Code - Explore the classes available in your project's Tailwind CSS setup.
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.
- ππΌ Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
- π 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.
- π¨π§¬ Prefers Dark Mode - Adds variants based on the
prefers-color-scheme
media query. - π¨π§¬ Dark Mode - Adds
dark
variants based on CSS classes. - π¨π§¬ Dark Mode - Adds
dark
variants based on theprefers-color-scheme
media query. - πΌ Gap - Adds
gap
utilities. - πΌ Aspect Ratio - Adds
aspect-ratio
utilities. - πΌ Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.
- πΌ Scroll Snap - Adds
scroll-snap
utilities. - πΌ Shadow Outline Colors - Adds
box-shadow
utilities based on configured colors. - πΌ Text Indent - Adds
text-indent
utilities. - πΌ Image Rendering - Adds
image-rendering
utilities. - πΌ Elevation - Adds Material UI
elevation
utilities. - πΌ Caret Color - Adds
caret
color 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.
- πΌ 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.
- πΌ Text Decoration Color - Adds
text-decoration-color
utilities. - πΌ 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. - πΌ Accent Color - Adds accent color utilities.
- 𧬠Pseudo - Adds custom variants to Tailwind CSS's configuration.
- 𧬠Direction - Adds
RTL
andLTR
variants. - 𧬠Touch - Adds
touch
variants. - 𧬠Alpha - Adds alpha color variants.
- 𧬠Localized - Adds variants based on the HTML
lang
attribute, to use utilities only with certain languages. - 𧬠Important - Adds an
important
variant. - 𧬠Padded Radius - Adds variants for matching nested border radii.
- 𧬠Fluid - Generates
fl:
variants. - 𧬠Marker - Provides utilities for styling lists and
<summary>
markers. - 𧬠Pseudo selectors - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
- 𧩠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).
π - The plugins below offer functionalities that are now fully or partially implemented in Tailwind CSS.
- ππΌ Caret Color - Adds
caret
color utilities. - ππΌ benface's gradients - Adds gradient utilities.
- ππΌ lorisleiva's gradients - Adds background gradient utilities.
- ππΌ Visually Hidden - Adds screen reader utilities.
- ππΌ Object Fit - Adds
object-fit
utilities. - ππΌ Object Position - Adds
object-position
utilities. - ππΌ Accessibility - Adds screen reader utilities.
- ππΌ Layout - Adds some layout utilities.
- ππΌ Grid - Adds CSS grids utilities.
- ππΌ Transforms - Adds
transform
utilities. - ππΌ benface's transitions - Adds configurable transition utilities, with or without CSS variables.
- ππΌ webdna's transitions - Adds configurable transition utilities.
- ππΌ glhd's transitions - Adds basic transition utilities.
- ππΌ Cursor Extended - Extends
cursor
utilities. - ππΌ Font Variant Numeric - Adds
font-variant-numeric
utilities. - ππΌ Filters - Adds
filter
utilities. - ππΌ CSS Filters - Adds
filter
andbackdrop-filter
utilities with defaults. - ππΌ Blend Mode - Adds
blend-mode
utilities. - ππΌ Colorize - Adds
filter
utilities. - π𧬠CSS Alpha Colors - Adds opacity variants to existing colors.
- π𧩠Spinner - Adds a spinner component.
- π𧩠Spaced Items - Adds
spaced
components that add fixed margins to all container items. - ππ§©π 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.
- π¨ππ§ Tailwindow's Color Shades - Color shades generator for Tailwind CSS.
- π¨ππ§ 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 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.
- ππ§ Stitches - Template generator with Tailwind (online).
- ππ§ 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.
- ππ Play - Advanced online playground for Tailwind CSS.
- π Updrafts.app - Advanced online no-code drag and drop editor for Tailwind CSS.
- π tailwind.run - Tailwind CSS fiddle with built-time features (online).
- π tailzilla.app - Online playground for Tailwind CSS.
- πΌπ 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.
- π ° typed-tailwind - TypeScript typings for Tailwind CSS.
- πΌ 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 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.
- πΌπ§ 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.
- π§ 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.
- π 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.
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.
- π Tailwind Made - Paid, developer-friendly templates made with Tailwind CSS.
- π EasyTailwind - Freemium, easily customizable templates made 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.
- 𧩠Date picker - Datepicker component for Vue.js using Tailwind CSS.
- 𧩠Kutty - Accessible and reusable components that are commonly used in web applications.
- 𧩠Tailwindow - Collection of Tailwind CSS component blocks and UI elements.
- 𧩠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.
- 𧩠lofi ui - Low-fidelity Tailwind CSS components.
- 𧩠Gust UI - Sleek Tailwind CSS components for web applications in React and HTML.
- 𧩠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.
- π 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.
- π Resume - A stylized resume template built with Tailwind CSS, featuring a nifty hero-pattern background and custom font.
- π 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.
- π 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.
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.
- π Tailwind CSS Boilerplate - Tailwind CSS boilerplate using Parcel.
- π 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 + Vue 3.x + Tailwind 2.x Starter - Starter template using Vite, Vue, Vue Router 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.
Open-Source Projects
- Goodwork - Project Management & Collaboration tool.
- Statusfy - Status page system using Tailwind CSS.
- 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.
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.
- π§ͺ Toggle switch - Switch using 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 Webpack 4 and PostCSS - How to setup Tailwind CSS with PostCSS and Webpack.
- π§ 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.
- π§ Web2Tailwind - How to build web components with Tailwind CSS with AlpineJS.
- π¬ 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.
- π Modal Dialog - Creating a modal dialog with Tailwind CSS.
- π Building real-world UIs using Tailwind CSS - Building UIs of Shopify, Spotify, Netlify and Atlassian.
- π Rebuilding FreshBooks - Rebuilding FreshBooks with Tailwind CSS.
- π 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.