back to home

aniftyco / awesome-tailwindcss

馃槑 Awesome things related to Tailwind CSS

14,895 stars
991 forks
0 issues
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing aniftyco/awesome-tailwindcss in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/aniftyco/awesome-tailwindcss)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<!--lint disable awesome-heading awesome-github double-link no-dead-urls--> <p align="center"> <br> <img width="100" src="./assets/logo.svg" alt="Tailwind CSS logo"> <br> <br> </p> <h2 align="center">Awesome Tailwind CSS</h2> <p align="center"> <a href="https://tailwindcss.com">Tailwind CSS</a> is a utility-first CSS framework for rapidly building custom user interfaces. <br> <br> <a href="https://github.com/sindresorhus/awesome"> <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome badge"> </a> &nbsp; <a href="https://github.com/sindresorhus/awesome-lint"> <img src="https://github.com/aniftyco/awesome-tailwindcss/workflows/Lint/badge.svg" alt="Lint status badge"> </a> <br> <br> </p>

Contents

Useful links

Legend: 馃挋 Official resource

  • 馃挋 Website - Official Tailwind CSS website.
  • 馃挋 Repository - Official Tailwind CSS repository.
  • 馃挋 Tailwind Plus - UI blocks, templates, and a UI kit by the Tailwind CSS team.
  • 馃挋 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

Tools

Legend: 馃實 Accessible online 路 馃寪 Browser extension 路 馃敿 Conversion or upgrade tool 路 馃敡 Generator 路 馃叞 Typing/enforcement 路 馃捈 Plugins/Tools/Extensions for external services 路 馃帹 Color-related 路 馃殌 Framework

  • 馃挋馃捈 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.
  • 馃帹馃實馃敡 TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
  • 馃帹馃實馃敡 Hypercolor - Collection of Tailwind CSS gradients with directional options.
  • 馃帹馃實馃敡 Tints - Color palette generator and API for Tailwind CSS.
  • 馃帹馃實馃敡 Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
  • 馃帹馃實馃敡 Inclusive colors - Create fine-tuned WCAG accessible Tailwind CSS color palettes.
  • 馃敿馃實 Prefixer - Tailwind classes' prefixer tool.
  • 馃敿 RustyWind - CLI tool for sorting Tailwind CSS classes.
  • 馃殌 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
  • 馃捈 @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
  • 馃捈 tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
  • 馃捈 Config viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
  • 馃捈 Raycast extension - Search classes, documentation and colors in Raycast Launcher.
  • 馃捈 NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
  • 馃寪 Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
  • 馃寪 CSS Variables Editor - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.
  • 馃寪 DivMagic - Copy any web element and style as Tailwind CSS component.

UI libraries, components & templates

Legend: 馃挋 Official resource 路 馃摎 UI library 路 馃З Copy-pastable components 路 馃搧 Full 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.
  • 馃З shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
  • 馃З Layouts for Tailwind - Layouts and UI patterns for Tailwind CSS.
  • 馃З Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
  • 馃З Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
  • 馃З HyperUI - Open source marketing and ecommerce Tailwind CSS components.
  • 馃З Ripple UI - Clean, modern and beautiful Tailwind CSS components.
  • 馃З Pines UI - Alpine and Tailwind CSS UI library.
  • 馃З Kokonut UI - Collection of modern, interactive customizable UI components.
  • 馃З 8bitcn UI - Re-usable retro components built using Shadcn UI and Tailwind CSS.
  • 馃З Xtend UI - Tailwind CSS components with advanced interactions and animations.
  • 馃З Tremor - React library to build charts and dashboards with Tailwind CSS.
  • 馃摎 Daisy UI - UI Components for Tailwind CSS.
  • 馃摎 Flowbite - Component library built with Tailwind CSS.
  • 馃摎 STDF - Mobile web component library based on Svelte and Tailwind CSS.
  • 馃摎 Preline UI - Open-source Tailwind CSS components library for any needs.
  • 馃摎 Date picker - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
  • 馃搧 Built at lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
  • 馃搧 Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
  • 馃搧 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.

Plugins

Legend: 馃挋 Official plugin 路 馃帹 Theming 路 馃捈 Utilities 路 馃З Components 路 馃洃 Deprecated

  • 馃挋馃З Typography - Adds a prose class for beautiful typographic defaults.
  • 馃挋 Forms - Adds better default styles to form elements.
  • 馃帹 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
  • 馃捈 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.
  • 馃捈 px to viewport - Adds utilities to automatically convert px to vw / vh.
  • 馃捈馃З Fluid - Adds fluid clamp() versions of every built-in utility.
  • 馃З Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
<p align="center"> <br /> <br /> 路 <br /> <br /> <sub>Contributions welcome! Read the <a href="CONTRIBUTING.md">contribution guidelines</a> first.</sub> </p>