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.

---

🌟 Tailwind Blog 🌟 - Checkout the new blog to read all the latest Tailwind CSS news, straight from the team.

---

Contents

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

Plugins

• Typography (Official) - Adds prose class for beautiful typographic defaults.
• 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.
• 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.
• Multi Theme - Creates multiple themes based on a single theme property.
• Background svg - Inject svgs as background images with color variants.
• Brand Colors - Adds various brand colors for background, border and text.
• Padded Radius - Adds variants for matching nested border radii.
• Bootstrap Grid - Generates Bootstrap's style flexbox grid system.

🛑 - 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.
• 🛑 Spinner - Adds a spinner utility.

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.
• Sail UI - Collection of basic UI components built on Tailwind CSS.
• Tailwindow - Collection of Tailwind CSS component blocks and UI elements.
• Kutty - Set of accessible and reusable components that are commonly used in web applications.

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.
• Discussions - Official place to connect with other community members about Tailwind.
• 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).
• 🌍🔧GPT-3 Tailwind CSS code generator - OpenAI GPT-3 powered Tailwind CSS code generator.
• 🌍 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 Gradient Designer - Generate a gradient for Tailwind 1.7+.
• 🌍🧪 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.
• 🌍🔧 Tailwindow Color Shades Generator - Generate your own color shades with customizable color intervals and ranges.
• 💼🔧 Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
• 💼🔧 Laravel Form Components - A set of Blade components to rapidly build forms with Tailwind CSS Custom Forms. Supports validation, model binding, translations, includes default vendor styling and fully customizable.

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 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 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.
• 🔧 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.
• 🔧 Create Tailwind CSS Boilerplate - Bare-bones Tailwind CSS boilerplate served by Parcel and using PurgeCSS in production builds.
• 🔧 VuePress Tailwind CSS Starter - A VuePress starter using Tailwind CSS.
• 🔧🛠 Laravel Tailwind CSS Preset - A preset that adds Tailwind CSS to the Laravel framework.
• 🔧🛠 Vite Tailwind CSS Preset - A preset that adds Tailwind CSS to a Vite application.
• 🎨 Gatsby Serif - Gatsby's serif theme using Tailwind CSS.
• 🎨 Tailwind Admin - Administration panel template with Tailwind CSS.
• 🎨 Landing Gradients - Landing page template using gradients (1.7+).
• 🎨 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 with support for Tailwind CSS and TypeScript.
• 🎨 Windmill Dashboard - Multi theme, completely accessible dashboard.
• 🎨 Tailwind Made - Paid, developer-friendly templates made with Tailwind CSS.

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.
• Tailwind CSS Shades - Tailwind CSS color palette generator.

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.
• 🧪 “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.
  • 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
• Primcloud
• 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
• Frontendfun
• PWA Inside
• EqualOpportunity.Work
• Online Form Builder

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.