Courses & TutorialsProgramming

Awesome Tailwind CSS – Massive Collection of Resources


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.
  • 馃挋 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.
  • 馃挋 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.
  • 馃З馃搧 Jakarta LTE – Admin template 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.
  • 馃З Windstrap – Tailwind CSS with Bootstrap JS.
  • 馃搧 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

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.

Related Posts:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button