Curated list of awesome lists
Contents
Useful Links
Legend: 💙 Official resource
- 💙 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.
- 💙 Headless UI - Completely unstyled, fully accessible UI components.
- 💙 Heroicons - Beautiful, hand-crafted SVG icons.
- 💙 Play - Advanced online playground for Tailwind CSS.
-
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: 💙 Official resource
Plugins
Legend: 💙 Official plugin · 🎨 Theming · 💼 Utilities · 🧬 Variants · 🧩 Components · 🛑 Deprecated
- 💙🧩 Typography - Adds a
prose
class for beautiful typographic defaults.
- 💙💼 Aspect Ratio - Adds composable aspect ratio utilities.
- 💙💼 Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
- 💙 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 single
theme
property.
- 🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
- 🎨🧬 Prefers Dark Mode - Adds variants based on the
prefers-color-scheme
media query.
- 🎨🧬 Dark Mode - Adds
dark
variants based on CSS classes.
- 🎨🧬 Dark Mode - Adds
dark
variants based on the prefers-color-scheme
media query.
- 💼 Gap - Adds
gap
utilities.
- 💼 Aspect Ratio - Adds
aspect-ratio
utilities.
- 💼 Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.
- 💼 Scroll Snap - Adds
scroll-snap
utilities.
- 💼 Shadow Outline Colors - Adds
box-shadow
utilities based on configured colors.
- 💼 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.
- 💼 Blend Mode - Adds
blend-mode
utilities.
- 💼 Colorize - Adds
filter
utilities.
- 💼 Writing Mode - Adds
writing-mode
utilities.
- 💼 Hyphens - Adds
hyphens
utilities.
- 💼 Border Gradients - Adds
border-image
gradient utilities.
- 💼 RFS - Adds
RFS
utilities.
- 💼 List Reset - Adds back the
list-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 - Adds
filter
and backdrop-filter
utilities with defaults.
- 💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
- 💼 Text Decoration Color - Adds
text-decoration-color
utilities.
- 🧬 Pseudo - Adds custom variants to Tailwind CSS's configuration.
- 🧬 Direction - Adds
RTL
and LTR
variants.
- 🧬 Touch - Adds
touch
variants.
- 🧬 Alpha - Adds alpha color variants.
- 🧬 Localized - Adds variants based on the HTML
lang
attribute, to use utilities only with certain languages.
- 🧬 Important - Adds an
important
variant.
- 🧬 Padded Radius - Adds variants for matching nested border radii.
- 🧬 Fluid - Generates
fl:
variants.
- 🧬 Marker - Provides utilities for styling lists and
<summary>
markers.
- 🧩 Debug Screens - Adds a component that shows the currently active screen (responsive breakpoint).
- 🧩 Heropatterns - Adds Hero Patterns components.
- 🧩 Responsive Embed - Adds a
responsive-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.
Legend: 🌍 Accessible online · 🔼 Conversion or upgrade tool · 🔧 Generator · 🅰 Typing/enforcement · 💼 Plugins/Tools/Extensions for external services · 🎨 Color-related · 🚀 Framework
UI Libraries, Components & Templates
Legend: 💙 Official resource · 📚 Library · 🧩 Components · 📁 Templates
- 💙🧩 Tailwind UI - Component library made with Tailwind CSS.
- 💙📚 Headless UI - Completely unstyled, fully accessible UI components.
- 📚 VueTailwind - Vue.js UI library using Tailwind CSS.
- 📁 Tailwind Made - Paid, developer-friendly templates made with Tailwind CSS.
- 📁 EasyTailwind - Freemium, easily customizable 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.
- 🧩📁 Jakarta LTE - Admin template using Tailwind CSS.
- 🧩📁 themes.dev - Handcrafted, free and premium Tailwind CSS themes and components.
- 🧩 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.
- 🧩 lofi ui - Low-fidelity Tailwind CSS components.
- 🧩 Gust UI - Sleek Tailwind CSS components for web applications in React and HTML.
- 🧩 Windstrap - Tailwind CSS with Bootstrap JS.
- 🧩 WickedBlocks - Collection of more than 120 layout blocks and components built with Tailwind CSS.
- 🧩 Daisy UI - UI Components for Tailwind CSS.
- 📁 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+).
- 📁 Resume - Simple resume with Tailwind CSS.
- 📁 Simple Light - Free landing page template built with React & Tailwind CSS.
- 📁 V-Dashboard - Dashboard starter template built with Vue 3 and Tailwind CSS.
- 📁 Petra - Free landing page template built with Nuxt.js & Tailwind CSS.
- 📚 a17t - Atomic design toolkit built to extend Tailwind CSS.
- 📚 tails-ui - React UI library using Tailwind CSS.
- 📚 tails - Hand-crafted templates and components using Tailwind CSS.
Starters & Themes
Legend: 💼 Package · 📟 Command line tool/generator · 🚀 Cloneable
- 📟 Create React App with PurgeCSS - CRA script that adds Tailwind CSS and PurgeCSS.
- 📟 Laravel Preset - Adds Tailwind CSS to the Laravel framework.
- 📟💼 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.
- 🚀 Vite + React + Tailwind Starter - Boilerplate using Vite, React and Tailwind CSS.
- 🚀 Vite + Vue 3.x + Tailwind 2.x Starter - Starter template using Vite, Vue, Vue Router and Tailwind CSS.
- 🚀 Shopify Theme Lab - Shopify theme development starter using Vue and Tailwind CSS.
- 🚀 Starter Dashboard Layout - Dashboard layout using Tailwind CSS and Alpine JS.
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: 💙 Official resource · 🧪 Sample · 🔧 Setup Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥 Cast
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.