kenhyuwa / awesome-tailwindcss

A curated list of awesome things related to Tailwind CSS

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.

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.