Courses & TutorialsProgramming

Awesome Tailwind CSS – Massive Collection of Resources

Spread the love


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

  • πŸŽ¨πŸŒπŸ”§ 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 Color Explorer – Color explorer for Tailwind CSS.
  • πŸŽ¨πŸŒπŸ”§ TailwindInk – AI palette generator, trained with the Tailwind CSS palette.
  • πŸŽ¨πŸŒπŸ”§ Gradient Designer – Generate gradients for Tailwind 2.0+.
  • πŸŽ¨πŸŒπŸ”§ Grayscale Design – A Luminance-based color palette generator.
  • πŸŽ¨πŸŒπŸ”§ Hypercolor – Collection of pre-configured Tailwind CSS gradients with directional options.
  • πŸŽ¨πŸŒπŸ”§ Palettolithic – Generates harmonius color palettes based on one color.
  • πŸŽ¨πŸŒπŸ’Ό Tailwind CSS v2 colors – Figma library with Tailwind CSS v2 colors.
  • πŸŽ¨πŸ”§πŸ’Ό Colorkraken – Color shades generator for Tailwind CSS.
  • πŸŒπŸ”§ GPT-3 Tailwind CSS code generator – OpenAI GPT-3 powered Tailwind CSS code generator.
  • πŸŒπŸ”§ Stitches – Template generator with Tailwind (online).
  • πŸŒπŸ”§ tail-animista – Configurable custom animation utilities generator for Tailwind CSS.
  • 🌍 Typography Playground – Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.
  • πŸŒπŸ’™ Play – Advanced online playground for Tailwind CSS.
  • 🌍 tailwind.run – Tailwind CSS fiddle with built-time features (online).
  • 🌍 tailzilla.app – Online playground for Tailwind CSS.
  • πŸ”ΌπŸŒ Tailwind Automatic Prefix Applicator – Tailwind classes’ prefixer tool.
  • πŸ”ΌπŸŒ CSS to Tailwind CSS Converter – Converts CSS to Tailwind CSS by suggesting classes that best match.
  • πŸ”Ό 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.
  • πŸ’Ό tailwind-classes-sorter – NPM library which provides a utility to sort Tailwind CSS classes.
  • πŸ’Ό prettier-plugin-tailwind – Prettier plugin that sorts class lists.
  • πŸ’ΌπŸ”§ 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: πŸ’™ 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.

Back to top button