Skip to content

😎 Awesome things related to Tailwind CSS

License

Notifications You must be signed in to change notification settings

aniftyco/awesome-tailwindcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


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.
  • πŸ’™ 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.
  • πŸ’™ Discord - Official Discord server to connect with other community members about Tailwind CSS.
  • Tailwind Weekly - Weekly newsletter about all things 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.
  • πŸ’™πŸ’Ό Container queries - Provides utilities for container queries.
  • πŸ’™ Forms - Adds better default styles to form elements.
  • 🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
  • 🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
  • 🎨🧬 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
  • 🎨🧩 Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
  • 🎨🧩 CSS Variables - Exports custom CSS variables.
  • πŸŽ¨πŸ’Ό Accent - Adds accent colors for more dynamic and flexible color utilization.
  • πŸ’ΌπŸ§¬ Radix - Adds utilities and variants for styling Radix UI state.
  • πŸ’Ό Image Rendering - Adds image-rendering utilities.
  • πŸ’Ό Elevation - Adds Material UI elevation utilities.
  • πŸ’Ό RFS - Adds RFS utilities.
  • πŸ’Ό Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
  • πŸ’Ό Background SVG - Inject SVGs as background images with color variants.
  • πŸ’Ό Background Unsplash - Apply unsplash.com images as background.
  • πŸ’Ό Brand Colors - Adds various brand colors for background, border and text.
  • πŸ’Ό Bootstrap Grid - Generates Bootstrap's style flexbox grid system.
  • πŸ’Ό Dot & Grid Backgrounds - Adds bg-grid and bg-dot classes to add easy-to-customize grid and dot pattern backgrounds with just CSS.
  • πŸ’Ό Leading Trim - Adds utilities to trim text whitespace, using Capsize.
  • πŸ’Ό Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
  • πŸ’Ό Fluid Type - Adds fluid type (font-size) utilities.
  • πŸ’Ό Grid Areas - Adds grid-areas and grid-area utilities.
  • πŸ’Ό Full bleed background and borders - Provides utilities for extended backgrounds and borders.
  • πŸ’Ό CSS Filter Order - Adds filter-order utilities for changing the order of filters in the generated CSS.
  • πŸ’Ό Tailwind CSS 3D - Adds 3D transform utilities and animations.
  • πŸ’Ό Claymorphism - Adds clay utilities for creating claymorphism style.
  • πŸ’ΌπŸ§¬πŸ§© Fluid - Adds fluid clamp() versions of every built-in utility.
  • 🧬 FormKit - Adds variants for input and form states for FormKit.
  • 🧬 Htmx - Adds variants for styling on htmx events.
  • 🧬 Quantity Queries - Adds variants for using quantity queries.
  • 🧩 Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
πŸ›‘ *Below are official plugins which functionalities are either deprecated or (partially) implemented in core.*
  • πŸ›‘πŸ’ΌπŸ’™ Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
  • πŸ›‘πŸ§©πŸ’™ Custom Forms - Adds better default styles to form elements.
  • πŸ›‘πŸ’™πŸ’Ό Aspect Ratio - Adds composable aspect ratio utilities.

Tools

Legend: 🌍 Accessible online Β· πŸ”Ό Conversion or upgrade tool Β· πŸ”§ Generator Β· πŸ…° Typing/enforcement Β· πŸ’Ό Plugins/Tools/Extensions for external services Β· 🎨 Color-related Β· πŸš€ Framework Β· πŸ’° Paid plans

  • πŸ’™πŸ’Ό Prettier plugin - Official Tailwind CSS plugin for Prettier.
  • πŸŽ¨πŸŒπŸ”§ Ui Colors - Color palette generator for Tailwind CSS.
  • πŸŽ¨πŸŒπŸ”§ Tailwind Color Shades - Color shades generator for Tailwind CSS.
  • πŸŽ¨πŸŒπŸ”§ Palette generator - Color palette generator that outputs Tailwind CSS configuration files.
  • πŸŽ¨πŸŒπŸ”§ 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 harmonious color palettes based on one color.
  • πŸŽ¨πŸŒπŸ”§ Tailwind Gradient Generator - Create perfect Tailwind CSS gradients with zero lines of code.
  • πŸŽ¨πŸŒπŸ”§ Tints - Color palette generator and API for Tailwind CSS.
  • πŸŽ¨πŸŒπŸ”§ Tailwind CSS Colors - Cheat sheet for Tailwind CSS colors.
  • πŸŽ¨πŸŒπŸ”§ Tailwind Gradients - Collection of gradients using Tailwind CSS classes.
  • πŸŽ¨πŸŒπŸ”§ Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
  • πŸŽ¨πŸŒπŸ”§ InclusiveColors - Create fine-tuned WCAG accessible Tailwind CSS color palettes.
  • πŸŒπŸ”§πŸ’Ό Twind - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
  • πŸŒπŸ”§ tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
  • πŸŒπŸ”§ brands-tail-color - Configuration generator using various brands' colors.
  • 🌍 Typography playground - Tool for trying different Google Fonts combinations with the Tailwind CSS typography plugin.
  • 🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.
  • πŸ”ΌπŸŒπŸ”§ Tailwindhelper - Visualize Tailwind CSS classes and unit converter.
  • πŸ”ΌπŸŒ Prefixer - Tailwind classes' prefixer tool.
  • πŸ”ΌπŸŒ CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
  • πŸ”ΌπŸŒ ska-tailwind-editor - Edit Tailwind HTML as WordPress blocks with intuitive UI for Tailwind classes and get HTML or JSX back.
  • πŸ”Ό Tailwindo - Bootstrap to Tailwind CSS converter.
  • πŸ”Ό RustyWind - CLI tool for sorting Tailwind CSS classes.
  • πŸš€ Maizzle - Framework for rapid email prototyping with Tailwind CSS.
  • πŸ…° react-native-tailwindcss - React Native typing system.
  • πŸ’Ό Alfred Workflow - Fast Tailwind CSS documentation search application.
  • πŸ’Ό vue-cli-plugin-tailwind - Vue CLI plugin that adds Tailwind CSS to a project.
  • πŸ’Ό @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
  • πŸ’Ό preact-cli-tailwind - Tailwind CSS integration for Preact.
  • πŸ’Ό tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
  • πŸ’ΌπŸ”§ twin.macro - Use Tailwind classes within any CSS-in-JS library.
  • πŸ’ΌπŸ”§ tailwindcss-webpack-plugin - Out-of-the-box Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration.
  • πŸ’ΌπŸ”§ tailwindcss-vite-plugin - Vite plugin for Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration.
  • πŸ’ΌπŸ”§ Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
  • πŸ’Ό clb - clb (class list builder) is a utility function that builds a class list based on a Stitches like API.
  • πŸ’Ό react-with-class - Utility function for creating primitive React components with a set of classes, props or variants.
  • πŸ’Ό twined-components - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.
  • πŸ’Ό Tails DevTools - All-in-one browser extension for Tailwind CSS.
  • πŸ’Ό Impulse.dev – UI editor for Tailwind CSS and React that edits your code.
  • πŸ’Ό Tailiscope.nvim - Tailwind CSS cheat sheet integrated in Neovim.
  • πŸ’Ό Raycast Extension - Search classes, documentation and colors in Raycast Launcher.
  • πŸ’Ό DivMagic - Copy any web element and style as Tailwind CSS component.
  • πŸ’Ό Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
  • 🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
  • πŸŒπŸ”§ Tailwind Grid Generator - Drag and drop Tailwind CSS grid generator.
  • πŸŒπŸ”§ Tailwind Box Shadows Generator - Box Shadows generator.
  • πŸ’°πŸŒπŸ”§ Windframe - Tailwind CSS drag and drop builder to rapidly build and prototype websites.
  • 🌍 Static Tailwind - The most used Tailwind classes, precompiled, with no build step.
  • πŸŽ¨πŸ”§ CSS Variables Editor - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.

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.
  • πŸ’™πŸ“ Catalyst - Beautiful, accessible application UI kit for React.
  • πŸ“š VueTailwind - Vue.js UI library using Tailwind CSS.
  • πŸ“š Flowbite - Open-source component library built with 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.
  • πŸ“š Svelte Headless UI - Unofficial Svelte port of Headless UI.
  • πŸ“š Xtend UI - Tailwind CSS components with advanced interactions and animations.
  • πŸ“š Headless UI Float - Floating UI integration for Headless UI.
  • πŸ“š Vanilla Components - Set of fully customizable Vue components.
  • πŸ“š Sailboat UI - Modern UI framework for Tailwind CSS.
  • πŸ“š Built At Lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
  • πŸ“š Statichunt - Open source directory of hand-picked free and premium Tailwind templates & Starters.
  • πŸ“š Tailkits - Curated Tailwind CSS components, templates, UI kits, resources, tools & more.
  • πŸ“š STDF - Mobile web component library based on Svelte and Tailwind CSS.
  • πŸ“š TWC - Lightweight library to create reusable React + Tailwind CSS components in one line.
  • πŸ“š Tremor - React library to build charts and dashboards with Tailwind CSS.
  • πŸ“š Preline UI - Open-source Tailwind CSS components library for any needs.
  • πŸ“šπŸ§©Flyon UI - Open-source components library for 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.
  • 🧩 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.
  • 🧩 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.
  • 🧩 Tailwind Datepicker - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
  • 🧩 Tailwind Typeahead - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.
  • 🧩 Material Tailwind - Easy to use components library for Tailwind CSS and Material Design.
  • 🧩 Layouts for Tailwind - Layouts and UI Patterns for Tailwind CSS.
  • 🧩 HyperUI - Open source marketing and ecommerce Tailwind CSS components.
  • 🧩 Snippets - Open source collection of animation snippets made for Tailwind CSS.
  • 🧩 Fancy Tailwind - Large collection of Tailwind CSS UI components (700+).
  • 🧩 Myna UI - Open source UI Components and Marketing Elements made with Tailwind CSS.
  • 🧩 RippleUI - Clean, modern and beautiful Tailwind CSS components.
  • 🧩 Wind UI - Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app.
  • 🧩 Pines UI - Alpine and Tailwind CSS UI library.
  • 🧩 NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
  • 🧩 Windstatic - Set of 161 elements & layouts made with Tailwind CSS and Alpine.js.
  • 🧩 TailwindFlex - Free library of Tailwind CSS examples.
  • 🧩 Shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
  • 🧩 Indie UI - Rich styled UI components.
  • 🧩 Penguin UI - Plug-n-play UI component library for Tailwind CSS & Alpine JS.
  • 🧩 Motion Primitives - React motion components built with Tailwind CSS and Framer Motion.
  • πŸ“ Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
  • πŸ“ EasyTailwind - Freemium, easily customizable templates made with 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.
  • πŸ“ Tailmin - Admin dashboard built with Vue.js and Tailwind CSS.
  • πŸ“ OhMySMTP Templates - Set of Transactional HTML Email Templates, built with Maizzle
  • πŸ“ Material Tailwind Kit React - Free Tailwind CSS and React UI kit.
  • πŸ“ Material Tailwind Dashboard React - Free Tailwind CSS and React admin template.
  • πŸ“ Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
  • πŸ“ Cruip - Beautifully designed HTML, React, and Vue.js templates.
  • πŸ“ Admin One React - Free React.js Tailwind CSS admin template with Next.js & TypeScript.
  • πŸ“ Flowbite Admin Dashboard - Open-source admin dashboard template built with Tailwind CSS and Flowbite.
  • πŸ“ Astro Template Resume - Eye-catching resume template built with Astro, Tailwind CSS.
  • πŸ“ Astro Template Cactus - Tailwind CSS Astro starter template.
  • πŸ“ Astro Template Ovidius - Tailwind CSS & Astro blog template.
  • πŸ“ Astro Template Dante - Tailwind CSS & Astro blog/portfolio template.

Starters & Themes

Legend: πŸ’Ό Package Β· πŸ“Ÿ Command line tool/generator Β· πŸš€ Cloneable

Learning

Legend: πŸ’™ Official resource Β· πŸ§ͺ Sample Β· πŸ”§ Setup Tutorial Β· 🎬 Video Tutorial Β· πŸŽ“ Component or Page Tutorial Β· πŸŽ₯ Cast



Β·

Contributions welcome! Read the contribution guidelines first.