/awesome-tailwindcss

😎 Awesome things related to Tailwind CSS

Creative Commons Zero v1.0 UniversalCC0-1.0


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

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.
  • πŸ’™ 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.
  • πŸ’™πŸ§© 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 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.
  • 🧬 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.
  • 🧩 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.

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 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.
  • 🧩 lofi ui - Low-fidelity Tailwind CSS components.
  • 🧩 Gust UI - Sleek Tailwind CSS components for web applications in React and HTML.
  • πŸ“ 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.
  • πŸ“š 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.

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.



Β·

Contributions welcome! Read the contribution guidelines first.