Awesome Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
Contents
- Useful Links
- IDE Extensions
- Plugins
- Tools
- UI Libraries, Components & Templates
- Starters & Themes
- Open-Source Projects
- Learning
- Apps & Websites
Useful Links
Legend:
π Website - Official Tailwind CSS website.π Repository - Official Tailwind CSS repository.π Discussions - Official place to connect with other community members about Tailwind.π Tailwind UI - Component library made with Tailwind CSS.π Heroicons - Beautiful, hand-crafted SVG icons.- Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
- Built With Tailwind - Community-driven collection of awesome websites built with Tailwind CSS.
IDE Extensions
Legend:
π IntelliSense for Code - IntelliSense extension for Visual Studio Code.- Styled Snippets for Code - Snippet extension for Visual Studio Code.
- Headwind for Code - Class sorter extension for Visual Studio Code.
- Shades for Code - Color palette generator extension for Visual Studio Code.
- IntelliSense for Neovim - IntelliSense extension for Neovim.
Plugins
Legend:
π 𧩠Typography - Adds aprose
class for beautiful typographic defaults.π 𧩠Custom Forms - Adds better default styles to form elements.π¨ 𧬠Theming - Theming using CSS variables, with dark mode support.π¨ 𧬠Theme Variants - Adds them variants based on media queries and/or CSS selectors.π¨ 𧬠Multi Theme - Adds theme variants based on a singletheme
property.π¨ 𧬠Theme Swapper - Theming using CSS variables, with media queries support.π¨ 𧬠Prefers Dark Mode - Adds variants based on theprefers-color-scheme
media query.π¨ 𧬠Dark Mode - Addsdark
variants based on CSS classes.π¨ 𧬠Dark Mode - Addsdark
variants based on theprefers-color-scheme
media query.πΌ Gap - Addsgap
utilities.πΌ Aspect Ratio - Addsaspect-ratio
utilities.πΌ Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.πΌ Scroll Snap - Addsscroll-snap
utilities.πΌ Shadow Outline Colors - Addsbox-shadow
utilities based on configured colors.πΌ Text Indent - Addstext-indent
utilities.πΌ Image Rendering - Addsimage-rendering
utilities.πΌ Filters - Addsfilter
utilities.πΌ Elevation - Adds Material UIelevation
utilities.πΌ Caret Color - Addscaret
color utilities.πΌ Blend Mode - Addsblend-mode
utilities.πΌ Colorize - Addsfilter
utilities.πΌ Writing Mode - Addswriting-mode
utilities.πΌ Hyphens - Addshyphens
utilities.πΌ Border Gradients - Addsborder-image
gradient utilities.πΌ RFS - AddsRFS
utilities.πΌ Font Variant Numeric - Addsfont-variant-numeric
utilities.πΌ List Reset - Adds back thelist-reset
class that was removed prior to Tailwind CSS 1.0.πΌ Fluid - Adds fluid sizing utilities.πΌ Typography - Adds typography utilities.πΌ Triangle After - Adds CSS triangles utilities.πΌ Scrims - Adds scrims utilities.πΌ Truncate Multiline - Adds utilities to truncate multi-line text elements.πΌ CSS Logical Properties - Generate utilities for CSS Logical Properties.πΌ Tooltip Arrows After - Adds CSS utilities for tooltip arrows with configurable border and background.πΌ Bidirectional - Adds utilities for creating multilingual bidirectional layouts.πΌ Background SVG - Inject SVGs as background images with color variants.πΌ Brand Colors - Adds various brand colors for background, border and text.πΌ Bootstrap Grid - Generates Bootstrap's style flexbox grid system.πΌ CSS Filters - Addsfilter
andbackdrop-filter
utilities with defaults.πΌ Leading Trim - Adds utilities to trim text whitespace, using Capsize.𧬠Pseudo - Adds custom variants to Tailwind CSS's configuration.𧬠Direction - AddsRTL
andLTR
variants.𧬠Touch - Addstouch
variants.𧬠Alpha - Adds alpha color variants.𧬠Localized - Adds variants based on the HTMLlang
attribute, to use utilities only with certain languages.𧬠Important - Adds animportant
variant.𧬠Padded Radius - Adds variants for matching nested border radii.𧬠Fluid - Generatesfl:
variants.𧩠Debug Screens - Adds a component that shows the currently active screen (responsive breakpoint).𧩠Heropatterns - Adds Hero Patterns components.𧩠Responsive Embed - Adds aresponsive-embed
component.𧩠Bootstrap Tables - Adds table components based on Bootstrap's tables.𧩠Card - Adds card components.𧩠Skip link - Adds a Skip to main content accessible component.𧩠Colors to CSS Variables - Exports color configuration to CSS Custom Properties.𧩠CSS Variables - Exports configuration to CSS Custom Properties.
π - The plugins below offer functionalities that are now fully or partially implemented in Tailwind CSS.
π πΌ benface's gradients - Adds gradient utilities.π πΌ lorisleiva's gradients - Adds background gradient utilities.π πΌ 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.π πΌ 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.π πΌ Cursor Extended - Extendscursor
utilities.π 𧬠CSS Alpha Colors - Adds opacity variants to existing colors.π 𧩠Spinner - Adds a spinner component.π 𧩠Spaced Items - Addsspaced
components that add fixed margins to all container items.
Tools
Legend:
π¨ π π§ Tailwind Color Shades - Color shades generator for Tailwind CSS.π¨ π π§ Palette generator - Color palette generator that outputs Tailwind CSS configuration files.π¨ π π§ Tailwindow's Color Shades - Color shades generator for Tailwind CSS.π¨ π π§ Tailwind Colors - Color configuration generator for Tailwind CSS.π¨ π π§ Tailwind Gradient Designer - Generate a gradient for Tailwind 1.7+.π¨ π π§ Tailwind Color Explorer - Color explorer for Tailwind CSS.π¨ π π§ TailwindInk - AI palette generator, trained with the Tailwind CSS palette.π¨ π π§ Grayscale Design - A Luminance-based color palette generator.π π§ GPT-3 Tailwind CSS code generator - OpenAI GPT-3 powered Tailwind CSS code generator.π π§ Stitches - Template generator with Tailwind (online).π Typography Playground - Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.π tailwind.run - Tailwind CSS fiddle with built-time features (online).πΌ π 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.πΌ RustyWind - CLI tool for sorting Tailwind CSS classes.- π ° react-native-tailwindcss - React Native typing system.
- π ° typed-tailwind - TypeScript typings for Tailwind CSS.
πΌ Gatsby Plugin - Tailwind CSS integration for Gatsby.πΌ Gridsome Plugin - Tailwind CSS integration for Gridsome.πΌ 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.πΌ @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).πΌ preact-cli-tailwind - Tailwind CSS integration for Preact.πΌ π§ Zeplin Config & Class generator - Zeplin extension that generates Tailwind configurations.πΌ π§ @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.πΌ π§ Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.πΌ π§ Laravel Form Components - Blade form components using Tailwind CSS Custom Forms.π§ re-tailwind - ReasonML utility that generates Tailwind classes.π§ Protoship Codegen - Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.π Maizzle - Framework for rapid email prototyping with Tailwind CSS.π Tailwind Cheat Sheet - Tailwind CSS class names cheat sheet.π Tailwind Cheat Sheet - Tailwind CSS class names in one single file.π Tailwind Cheat Sheet - Tailwind CSS class names, variants and directives cheat sheet.
UI Libraries, Components & Templates
Legend:
π 𧩠Tailwind UI - Component library made with Tailwind CSS.π π React - Renderless, accessible UI components for React.π π Vue - Renderless, accessible UI components for Vue.js.π VueTailwind - Vue.js UI library using Tailwind CSS.π Tailwind Made - Paid, developer-friendly templates made with Tailwind CSS.𧩠TailBlocks - 60+ different ready to use Tailwind CSS blocks.𧩠Tailwind Components - Community-driven Tailwind CSS component repository.𧩠Tailwind Toolbox - Templates, components and resources.𧩠Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.𧩠π Tailwind Templates - Collection of templates and components.𧩠π Treact - React UI templates and components built using Tailwind CSS.𧩠Date picker - Datepicker component for Vue.js using Tailwind CSS.𧩠Kutty - Accessible and reusable components that are commonly used in web applications.𧩠Tailwindow - Collection of Tailwind CSS component blocks and UI elements.𧩠Sail UI - Collection of basic UI components built on Tailwind CSS.𧩠jQuery Toggler - Switches using jQuery and Tailwind CSS.𧩠Tailwind Kit - Framework-agnostic, Vue.js, React and Angular components.π Windmill Dashboard - Multi theme, completely accessible dashboard template.π Tailwind Admin - Administration panel template with Tailwind CSS.π Landing Gradients - Landing page template using gradients (1.7+).π a17t - Atomic design toolkit built to extend Tailwind CSS.π tails-ui - React UI library using Tailwind CSS.
Starters & Themes
Legend:
π Create React App with PurgeCSS - CRA script that adds Tailwind CSS and PurgeCSS.π Laravel Preset - Adds Tailwind CSS to the Laravel framework.π Vite Preset - Adds Tailwind CSS to a Vite application.π πΌ Laravel Front-end Preset - Front-end preset using Tailwind CSS for Laravel.π πΌ Laravel Dark Front-end Preset - Dark-themed front-end preset using Tailwind CSS for Laravel.π Create React App with EmotionJS - CRA boilerplate using Tailwind CSS and Emotion JS.π Create React App with TypeScript - CRA template with support for Tailwind CSS and TypeScript.π Tailwind CSS Boilerplate - Tailwind CSS boilerplate using Parcel.π 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 - CRA boilerplate using Tailwind CSS.π Create React App with PurgeCSS + Autoprefixer + CSSNano - CRA boilerplate using CSS Nano.π 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 Starter - Netlify Lambda boilerplate using Tailwind CSS.π 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 using CSS Nano.π ParcelJS + TypeScript Boilerplate - Boilerplate using Tailwind CSS, ParcelJS bundler and TypeScript.π VuePress Tailwind CSS Starter - A VuePress starter using Tailwind CSS.π Gatsby Serif - Gatsby's serif theme using Tailwind CSS.π Seminyak Hugo Theme - Hugo theme using Tailwind CSS.π Eleventy Starter - Production-ready, SEO-friendly blog starter using 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:
π π§ͺ Plugin Examples - Official plugin examples.π§ͺ Tailwind Dark Mode Theme Switcher - Switching themes with CSS Custom Properties and Tailwind CSS.π§ͺ 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 [see the Codepen].π¬ Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS [see the 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 - Building UIs of Shopify, Spotify, Netlify and Atlassian.π 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 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 - Thoughts, Stories & Ideas.
- Primcloud - Deploy your apps quickly and easily.
- Jack McDade - Is tired of boring websites.
- Dance of Dawn - Be awaked by your birth.
- Statamic - Build beautiful, easy to manage websites.
- Sitesauce - A static version of your website in one click.
- Hello Sun - Helping Brussels go solar.
- Nuxt - Build your next Vue.js application with confidence with NuxtJS.
Β·
Contributions welcome! Read the contribution guidelines first.