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
- 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. - Cursor Extended - Extends
cursor
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 - 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.
- 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.
π - 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 - Addsobject-fit
utilities.π Object Position - Addsobject-position
utilities.π Accessibility - Adds screen reader utilities.π Layout - Adds some layout utilities.π Important - Adds animportant
variant.π Grid - Adds CSS grids utilities.π Transforms - Addstransform
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.
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 TailwindCSS, Free and Open Source.
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.πΌ 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.π π§ TailwindCSS Palette Generator - Palette generator for Tailwind CSS (online).
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 + TypeScript - Gatsby starter using Tailwind CSS and TypeScript.π§ 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.
- 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.
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.π¬ 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
Emoji | Type |
---|---|
Sample | |
Setup Tutorial | |
Video Tutorial | |
Component or Page Tutorial | |
Cast |
Apps & Websites
- Josh Manders
- App Metrics
- Full Snack Developer
- 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
- Eyewitness.io
- 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
- Onur ΕuyalΓ§Δ±nkaya
- OpenEmu
- Alice's Magical Maze
- 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
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.