Skip to content

Noxxe-0001/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.
  • 💙 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.

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 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.
  • 🎨🧬 Themeable - Adds multiple themes support for Tailwind CSS.
  • 🎨🧬 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).
  • 🎨💼 Accent - Adds accent colors for more dynamic and flexible color utilization.
  • 💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
  • 💼 Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.
  • 💼 Image Rendering - Adds image-rendering utilities.
  • 💼 Elevation - Adds Material UI elevation 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.
  • 💼 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.
  • 💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
  • 💼 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.
  • 💼 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.
  • 💼 TailwindCSS 3D - Adds 3D transform utilities and animations.
  • 💼 Claymorphism - Adds clay utilities for creating claymorphism style.
  • 🧬 Touch - Adds touch variants.
  • 🧬 Localized - Adds variants based on the HTML lang attribute, to use utilities only with certain languages.
  • 🧬 Padded Radius - Adds variants for matching nested border radii.
  • 🧬 Fluid - Generates fl: variants.
  • 🧬 Pseudo selectors - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
  • 🧬 Container Queries - Adds CSS Container Query variants.
  • 🧬 FormKit - Adds variants for input and form states for FormKit.
  • 🧩 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).
  • 🧩 Perspective - Adds perspective utilities.
🛑 *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.
  • 📚 Vechai UI - High-quality accessible React components with the built-in dark mode 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.
  • 🧩 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.
  • 🧩 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.
  • 🧩 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.
  • 🧩 Sira UI - Customizable and accessible design system which provides TailwindCSS component class name library to build modern UI.
  • 🧩 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.
  • 📁 Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
  • 📁 Red Pixel Themes - Paid, developer-friendly templates made with Tailwind CSS.
  • 📁 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.

Starters & Themes

Legend: 💼 Package · 📟 Command line tool/generator · 🚀 Cloneable

Open-Source Projects

  • Goodwork - Project Management & Collaboration tool.
  • 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.
  • Angular Spotify - Spotify client built with Angular, Nx Workspace and Tailwind CSS.
  • GitProfile - Automatic portfolio builder based on GitHub profiles, built with React.js and Tailwind CSS.

Learning

Legend: 💙 Official resource · 🧪 Sample · 🔧 Setup Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥 Cast



·

Contributions welcome! Read the contribution guidelines first.

About

😎 Awesome things related to Tailwind CSS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published