awesome-tailwindcss/readme.md

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.

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.
• benface's transitions - Adds configurable transition utilities, with or without CSS variables.
• Theming (Dark/Light) - Adds powerful theming capabilities with CSS variables and prefers-color-scheme.
• Text Indent - Adds text-indent utilities.
• Transforms - Adds transform utilities.
• Image Rendering - Adds image-rendering utilities.
• Cursor Extended - Extends cursor utilities.
• Grid - Adds CSS grids 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.
• webdna's transitions - Adds configurable transition utilities.
• glhd's transitions - Adds basic transition utilities.
• 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 - Ads 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.

🛑 - 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.

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.

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.run - Tailwind CSS fiddle with built-time features (online).

Tools

• 🌍🔧 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.
• 🔧 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.

Emoji	Description
🌍	Online accessible
🧪	Conversion or upgrade tool
🔧	Generator
🅰	Typing/enforcement
💼	Plugins/Tools/Extensions for external services

Starters, 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 + Emotion JS - Gatsby starter using Tailwind CSS and Emotion JS.
• 🔧 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.
• 🔧 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 Starter Theme Starter - Hugo theme starter using Tailwind CSS.
• 🎨 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.

Emoji	Description
🔧	Starters & Boilerplates
🛠	Starter packages
🎨	Templates & Themes

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.

Open-Source Projects

• Goodwork - Project Management & Collaboration tool.
• Statusfy - Status page system using Tailwind CSS.
• Todolist - To-do list application using Tailwind CSS.

Learning

• 🧪 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.
• 🎓 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

Emoji	Type
🧪	Sample
🔧	Setup Tutorial
🎬	Video Tutorial
🎓	Component or Page Tutorial
🎥	Cast

Apps & Websites

• University of West London - UWL's website.
• Merched.com - Design-selling platform.
• NiftyCo - Website of NiftyCo.
• Josh Manders - Josh Manders's website.
• Matt Stauffer - Matt Stauffer's website.
• Miguel Piedrafita - Miguel Piedrafita's website.
• Blogcast - Tool for generating audio out of blog posts.
• Lichter.io (Alexander Lichter) - Alexander Lichter's website.
• Rias - Rias' blog.
• Freek Van der Herten - Freek Van der Herten's blog.
• Taylor Bryant - Taylor Bryant's blog.
• Oliver Davies - Oliver Davies's blog.
• BaseCode - Coding advice website.
• Joey Beninghove - Joey Beninghove's blog.
• Stefan Bauer - Stefan Bauer's blog.
• Eyewitness.io - Laravel monitoring application.
• Laravel Spark - Laravel Spark package's website.
• Sitesauce - Static site generator.
• Milan Chheda - Milan Chheda's blog.
• Matheus Lima - Matheus Lima's blog.
• CSS Cursors - CSS cursors cheat sheet.
• Developmint - Development company.
• Rational Investment Management - Rational Investment Management's website.
• Stephen Popoola - Stephen Popoola's website.
• Vince Mitchell - Vince Mitchell's website.
• Marco Mark - Marco Mark's website.
• Nehal Hasnayeen - Nehal Hasnayeen's website.
• Plowman Craven - Survey company.
• Our Name is Mud - Development company.
• BudgetDuo - Calculator tool.
• Quickwords - Quickwords application's website.
• The MBR Site - Membrane Bioreactors' website.
• Peter Fox - Peter Fox's website.
• Martin Williams - Martin Williams' website.
• Brahms Electric Hearses - Electric Vehicle company website.
• Sjabloon - Open-source package website.
• Guillaume Briday - Guillaume Briday's blog.
• Hello Sun - Hello Sun's website.
• Onur Şuyalçınkaya - Onur Şuyalçınkaya's website.
• OpenEmu - Website of OpenEmu.
• Alice's Magical Maze - Online game.
• sleeplessmind.info - A cool website.
• The Speedcube Site - Cubing platform.
• Woburn Mosaic - Contemporary art gallery.
• Hunsbury Hot Tubs - Family business.
• DigitalDam - Automated backup/snapshot scheduling for DigitalOcean droplets.
• SlidesGo - Google Slides and Powerpoint templates.
• BuildPulse - GitHub app helping you win the fight against flaky builds.
• ScrumGenius - Slack and Microsoft Teams stand-up automation.
• AwesomeTechStack - Techstack anaylizer tool.
• Allan White - Allan White's website.
• Dance of Dawn - Dance of Dawn website.

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.