Awesome Tailwind CSS – Massive Collection of Resources

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
• Apps & Websites

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.
• 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.
• 💙 Forms – Adds better default styles to form elements.
• 🎨🧬 Theming – Theming using CSS variables, with dark mode support.
• 🎨🧬 Theme Variants – Adds them 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 the prefers-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.
• 💼 Filters – Adds filter utilities.
• 💼 Elevation – Adds Material UI elevation utilities.
• 💼 Caret Color – Adds caret color utilities.
• 💼 Blend Mode – Adds blend-mode utilities.
• 💼 Colorize – Adds filter 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.
• 💼 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.
• 💼 CSS Filters – Adds filter and backdrop-filter utilities with defaults.
• 💼 Leading Trim – Adds utilities to trim text whitespace, using Capsize.
• 🧬 Pseudo – Adds custom variants to Tailwind CSS’s configuration.
• 🧬 Direction – Adds RTL and LTR 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.
• 🧩 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.

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

• 🛑💼 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.
• 🛑🧬 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.
• 🌍🔧 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.
• 🌍 Typography Playground – Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.
• 🌍💙 Play – Advanced online playground 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.
• 🅰 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.
• 💼🔧 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.
• 🔧 re-tailwind – ReasonML utility that generates Tailwind classes.
• 🔧 Protoship Codegen – Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.
• 🚀 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.
• 🧩 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 Templates – Collection of templates and components.
• 🧩📁 Treact – React UI templates and components built using Tailwind CSS.
• 🧩📁 Jakarta LTE – Admin template using Tailwind CSS.
• 🧩 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.
• 📁 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.
• 📚 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.

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.
• 🎬 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.
• 🎬 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.
• 🎥 Laracasts Weekly Stream: Tailwind
• 🎥 More experimentation with Tailwind CSS
• 🎥 Rebuilding Spotify
• 🎥 Rebuilding Discord
• 🎥 Rebuilding Meetup

Apps & Websites

• Josh Manders – Thoughts, Stories & Ideas.
• Primcloud – Deploy your apps quickly and easily.
• Jack McDade – Is tired of boring websites.
• Dance of Dawn – Be awaked by your birth.
• Statamic – Build beautiful, easy to manage websites.
• Sitesauce – A static version of your website in one click.
• Hello Sun – Helping Brussels go solar.
• Nuxt – Build your next Vue.js application with confidence with NuxtJS.