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.
- 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
andLTR
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 theprefers-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.
π - 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.
- 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.
- 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.
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.
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.
- π§ Create Tailwind CSS Boilerplate - Bare-bones Tailwind CSS boilerplate served by Parcel and using PurgeCSS in production builds.
- π¨ 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.
- π¨ Windmill Dashboard - Multi theme, completely accessible dashboard.
- 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.
- 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.
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.
- π¬ Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS.
- π¬ 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
- 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
- Frontendfun
- PWA Inside
Contributions welcome! Read the contribution guidelines first.
To the extent possible under law, NiftyCo has waived all copyright and related or neighboring rights to this work.