Tailwind CSS


Tailwind CSS logo

Awesome Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

Awesome badge   Lint status badge

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.
  • 馃挋 Just-in-time - Just-in-time compiler 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 theme 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.
  • 馃捈 Elevation - Adds Material UI elevation utilities.
  • 馃捈 Caret Color - Adds caret color 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.
  • 馃捈 Bidirectional - Replace the core utilities to be bi-direction compatible.
  • 馃捈 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.
  • 馃捈 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
  • 馃捈 Text Decoration Color - Adds text-decoration-color utilities.
  • 馃捈 Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
  • 馃捈 Downwind CSS Easings - Extends transition-timing-function utilities.
  • 馃捈 Content Placeholder - Adds utilities for content placeholder images.
  • 馃捈 No Scrollbar - Exposes scrollbar-none to visually hide a scrollbar.
  • 馃捈 Accent Color - Adds accent color utilities.
  • 馃捈 Downwind CSS Text Decoration - Adds composable text-decoration 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.
  • 馃К Pseudo selectors - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
  • 馃З 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.
  • 馃З CSS Variables - Exports custom CSS variables (Dark Mode supported).

馃洃 - The plugins below offer functionalities that are now fully or partially implemented in Tailwind CSS.

Tools

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 Elements - Huge collection of free components, mobile-friendly thanks to Bootstrap 5.
  • 馃搧 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 Cards - Growing collection of text/image cards.
  • 馃З馃搧 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.
  • 馃З Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
  • 馃З Mamba UI - Free Tailwind CSS components, sections and templates.
  • 馃З Litepie Date picker - A date range picker component for Vue.js and 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.
  • 馃搧 Resume - A stylized resume template built with Tailwind CSS, featuring a nifty hero-pattern background and custom font.
  • 馃搧 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

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.
  • Ubuntu 20.04 - An Ubuntu desktop using React.js + Tailwind CSS.

Learning

Legend: 馃挋 Official resource 路 馃И Sample 路 馃敡 Setup Tutorial 路 馃幀 Video Tutorial 路 馃帗 Component or Page Tutorial 路 馃帴 Cast





Contributions welcome! Read the contribution guidelines first.