Awesome Tailwind CSS

A curated list of awesome things related to Tailwind CSS

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

? Tailwind UI is hiring ? - Help define and build the future of their developer tools and products.

Contents

• Plugins
• UI Libraries & Components
• Resources
  • Useful Links
  • Tools
  • Starters, Templates & Themes
  • IDE Extensions
  • Open-Source Projects
  • Learning
  • Apps & Websites

Plugins

• Custom Forms (Official) - Adds better default styles to form elements.
• Theming (Dark/Light) - Adds powerful theming capabilities with CSS variables and prefers-color-scheme.
• Text Indent - Adds text-indent utilities.
• Image Rendering - Adds image-rendering utilities.
• Filters - Adds filter utilities.
• Spinner - Adds a spinner utility.
• Elevation - Adds Material UI elevation utilities.
• Caret Color - Adds caret color utilities.
• Direction - Adds RTL and LTR variants.
• Touch - Adds touch variants.
• Blend Mode - Adds blend-mode utilities.
• Colorize - Adds filter utilities.
• Writing Mode - Adds writing-mode utilities.
• Responsive Embed - Adds a responsive-embed component.
• Aspect Ratio - Adds aspect-ratio utilities.
• Hyphens - Adds hyphens utilities.
• Border Gradients - Adds border-image gradient utilities.
• RFS - Adds RFS utilities.
• Font Variant Numeric - Adds font-variant-numeric utilities.
• Dark Mode - Adds dark variants based on the prefers-color-scheme media query.
• Vue.js - Adds visibility classes that work with Vue.js's v-cloak directive.
• List Reset - Re-adds the list-reset class that was removed prior to Tailwind CSS 1.0.
• Fluid - Adds fluid sizing utilities.
• Flexbox Order - Extends order utilities.
• benface's gradients - Adds gradient utilities.
• lorisleiva's gradients - Adds background gradient utilities.
• Alpha - Adds alpha color variants.
• Bootstrap Tables - Adds table utilities based on Bootstrap's tables.
• Typography - Adds typography utilities.
• Card - Adds card components.
• Triangle After - Adds CSS triangles utilities.
• Scrims - Adds scrims utilities.
• Colors to CSS Variables - Exports color configuration to CSS Custom Properties.
• CSS Variables - Exports configuration to CSS Custom Properties.
• Spaced Items - Adds spaced components that add fixed margins to all container items, except the last one.
• Heropatterns - Adds Hero Patterns components.
• Localized - Adds variants based on the HTML lang attribute, to use utilities only with certain languages.
• Skip link - Adds a Skip to main content accessible component.
• Pseudo - Adds custom variants to Tailwind CSS's configuration.
• Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.
• Truncate Multiline - Adds utilities to truncate multi-line text elements.
• Debug Screens - Adds a component that shows the currently active screen (responsive breakpoint).
• Dark Mode with Class - Adds dark variants based on CSS classes.
• CSS Logical Properties - Generate classnames for CSS Logical Properties for margin, padding, border-width, border-raduis, text-align, float & writing-mode.
• CSS Scroll Snap - Adds scroll-snap utilities.
• Shadow Outline Colors - Adds box-shadow utilities based on configured colors.
• Tooltip Arrows After - Adds CSS utilities for tooltip arrows with configurable border and background.
• Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
• Fluid Utilities - Generate fl: utilities by leveraging existing config.

? - The functionalities these plugins below offer have been fully or partially implemented in the latest Tailwind CSS versions.

• ? 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.
• ? Important - Adds an important variant.
• ? 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.
• ? CSS Alpha Colors - Adds opacity variants to existing colors.

UI Libraries & Components

• tails-ui - React UI library using Tailwind CSS.
• VueTailwind - Vue.js UI library using Tailwind CSS.
• Tailwind Toolbox - Tailwind CSS templates, components and resources.
• Tailwind Templates - Tailwind CSS components.
• jQuery + Tailwind Checkbox Toggle - Switches using jQuery and Tailwind CSS.
• Tailwind Starter Kit - Tailwind Starter Kit is an extension for Tailwind CSS, Free and Open Source.
• a17t - Atomic design toolkit built to extend Tailwind CSS.
• tailblocks - 60+ different ready to use Tailwind CSS blocks.
• Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
• Treact - React UI templates and components built using Tailwind CSS.
• VueTailwindPicker - Datepicker component for Vue.js using Tailwind CSS.

Resources

Useful Links

• Tailwind CSS website - Official Tailwind CSS website.
• Tailwind CSS on GitHub - Official Tailwind CSS repository.
• ? Tailwind UI ? - Component library made with Tailwind CSS.
• Discussion Repository - Official Tailwind CSS repository for discussions.
• Tailwind Components - Community-driven Tailwind CSS component repository.
• Built With Tailwind - Community-driven collection of awesome websites built with Tailwind CSS.
• Tailwind Cheat Sheet - Tailwind CSS class names, variants and directives cheat sheet.
• Tailwind Cheat Sheet - Tailwind CSS class names cheat sheet.
• Tailwind Cheat Sheet - Tailwind CSS class names in one single file.
• tailwind.run - Tailwind CSS fiddle with built-time features (online).
• Maizzle - Framework for rapid email prototyping with Tailwind CSS.

Tools

Legend: ? Online accessible · ? Conversion or upgrade tool · ? Generator · ? Typing/enforcement · ? Plugins/Tools/Extensions for external services

• ?? Color shades generator - Color shades generator for Tailwind CSS (online).
• ?? Color palette generator - Color palette generator that outputs a color configuration for Tailwind CSS (online).
• ? Tailwind Button Playground - Playground for theming a button with Tailwind CSS (online).
• ?? Stitches - Template generator with Tailwind (online).
• ?? Tailwind Colors - Color configuration generator for Tailwind CSS.
• ?? Tailwind Automatic Prefix Applicator - Tailwind classes' prefixer tool.
• ? 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.
• ? tailwind.run - Tailwind CSS fiddle with built-time features (online).
• ? typed-tailwind - TypeScript typings for Tailwind CSS.
• ?? Zeplin Config & Class generator - Zeplin extension that generates Tailwind configurations.
• ? Gatsby Plugin Tailwind CSS - Gastby plugin to use Tailwind CSS with CSS-in-JS.
• ? Gridsome Plugin Tailwind CSS - Gridsome plugin to use Tailwind CSS with PurgeCSS, postcss-import, and postcss-env.
• ? re-tailwind - ReasonML utility that generates Tailwind classes.
• ? react-native-tailwindcss - React Native typing system.
• ? 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.
• ? RustyWind - CLI tool for sorting Tailwind CSS classes.
• ? Protoship Codegen - Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.
• ? @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
• ? preact-cli-tailwind - Adds Tailwind CSS module as PostCSS plugin and sets up PurgeCSS in production for PreactJS CLI Projects.
• ?? @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.

Starters, Templates & Themes

Legend: ? Starters & Boilerplates · ? Starter packages · ? Templates & Themes

• ? 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 + 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 with EmotionJS - CRA boilerplate using Tailwind CSS and Emotion JS.
• ? Create React App Boilerplate - CRA boilerplate using Tailwind CSS.
• ?? Create React App script with PurgeCSS - CRA script that adds Tailwind CSS and PurgeCSS.
• ? Create React App with PurgeCSS + Autoprefixer + CSSNano - CRA boilerplate with Tailwind CSS (PurgeCSS included), Autoprefixer and CSSNano.
• ? 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 Static Starter - Netlify Lambda boilerplate using Tailwind CSS.
• ? Ruby on Rails Example Project - Rails example application using Tailwind CSS.
• ?? Laravel Frontend Preset - Front-end preset using Tailwind CSS for the Laravel Framework.
• ?? Laravel Dark Frontend Preset - Dark-themed front-end preset using Tailwind CSS for the Laravel Framework.
• ? Laravel Boilerplate - Laravel boilerplate using Tailwind CSS, Inertia JS, TypeScript, Vue, and font-end theming.
• ? 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 including Tailwind CSS, Autoprefixer, PurgeCSS and CSSNano with PostCSS.
• ? ParcelJS + TypeScript Boilerplate - Boilerplate using Tailwind CSS, ParcelJS bundler and TypeScript.
• ? Gatsby Serif - Gatsby's serif theme using Tailwind CSS.
• ? Tailwind Admin - Administration panel template with Tailwind CSS.
• ? Wordpress Tailwind CSS + Google PWA - Wordpress Theme and PWA using Tailwind CSS.
• ? Seminyak Hugo Theme - Hugo Theme using Tailwind CSS.
• ? Create React App Template with Tailwind CSS + TypeScript - CRA Template to add Tailwind CSS + TypeScript support.

IDE Extensions

• Tailwind CSS IntelliSense for VS Code - Visual Studio Code IntelliSense extension for Tailwind CSS.
• Tailwind CSS Styled Snippets for VS Code - Visual Studio Code snippet extension for Tailwind CSS.
• Tailwind CSS IntelliSense for Neovim - Neovim IntelliSense extension for Tailwind CSS.
• Headwind for VS Code - Visual Studio Code class sorter for Tailwind CSS.

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: ? Sample · ? Setup Tutorial · ? Video Tutorial · ? Component or Page Tutorial · ? Cast

• ? Tailwind Dark Mode Theme Switcher - Switching themes with CSS Custom Properties and Tailwind CSS.
• ? Plugin Examples (Official) - Official plugin examples.
• ? 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.
• ? 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.
  • Codepen
• ? Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS.
  • 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 - Examples of building UIs of Shopify, Spotify, Netlify and Atlassian using Tailwind CSS.
• ? 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 with Tailwind CSS 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
• Audience
• Matt Stauffer
• Miguel Piedrafita
• Blogcast
• Lichter.io (Alexander Lichter)
• Rias
• Freek Van der Herten
• Taylor Bryant
• Oliver Davies
• BaseCode
• University of West London
• Joey Beninghove
• Stefan Bauer
• Laravel Spark
• Sitesauce
• Milan Chheda
• Matheus Lima
• CSS Cursors
• Developmint
• Rational Investment Management
• Stephen Popoola
• Vince Mitchell
• Marco Mark
• Nehal Hasnayeen
• Plowman Craven
• Our Name is Mud
• BudgetDuo
• Quickwords
• The MBR Site
• Peter Fox
• Martin Williams
• Brahms Electric Hearses
• Sjabloon
• Guillaume Briday
• Hello Sun
• OpenEmu
• sleeplessmind.info
• The Speedcube Site
• Woburn Mosaic
• Hunsbury Hot Tubs
• DigitalDam
• SlidesGo
• BuildPulse
• ScrumGenius
• AwesomeTechStack
• Allan White
• Dance of Dawn
• MOODZ Travel Gallery
• Laravel Livewire
• Valohai
• GitInLog
• UptimeMate
• myDID
• Home Away From Home
• Litekart
• NuxtJS Documentation
• Vaggelis Yfantis
• This Month Rocks
• Aditya Agarwal
• Dumpsters.com
• Rasul Kireev
• Built with Django
• Log1x

Contribute

Contributions welcome! Read the contribution guidelines first.

License

To the extent possible under law, NiftyCo has waived all copyright and related or neighboring rights to this work.