Awesome GitHub RepositoriesTailwind CSS Integration

Headless UI is a headless component library and accessible UI component kit that provides logic-only interface elements. It functions as a state-driven UI framework designed to provide functionality without prescribing any specific visual styles. The library is specifically designed for integration with Tailwind CSS, enabling the implementation of custom design systems. It allows users to apply visual styles to components based on whether they are active, selected, or open. The project covers the development of accessible UI components that meet ARIA standards and include built-in keyboard n

design.md is a design system specification format and toolchain that defines a visual identity through structured, machine-readable design tokens embedded in a human-readable Markdown document. It combines exact token values with prose explanations of design intent, enabling coding agents to consistently apply brand styles across a project while keeping the rationale accessible to human designers. The project provides a linter that validates design specification files for structural correctness, broken token references, and WCAG color contrast compliance, outputting structured findings. It al

Sage is a WordPress starter theme that provides a foundation for building sites using professional software engineering patterns and modern development workflows. It functions as a theme architecture designed for native compatibility with the visual block-based editor. The project integrates the Laravel Blade templating engine to separate business logic from presentation using reusable components. It incorporates the Tailwind CSS framework for building responsive user interfaces via a utility-first approach and includes a modern frontend build tool to provide asset compilation and hot-reloadi

HyperUI is a dependency-free collection of responsive HTML layouts and pre-styled components designed for various web domains. It functions as a Tailwind CSS component library where users integrate standalone HTML snippets via a copy-paste distribution model to avoid package installation and framework overhead. The library features one-click markup copying from a pre-built component gallery. It includes specialized design systems, such as high-contrast neobrutalist styling with heavy borders, and visual tools for generating dark mode color palettes and harmonic typography scales. The compone

This is a markdown-based blog engine and Next.js starter template that renders posts from files with frontmatter support for tags, authors, and metadata. It functions as a static site generator, building a complete blog into deployable HTML files for any hosting provider, while using Tailwind CSS utility classes for fully customizable typography, layout, and color schemes. The template generates RSS feeds, sitemaps, and structured metadata for search engine visibility, and supports connecting to external services like analytics tracking and comment sections through configurable plugin modules

shadcn-vue is a collection of accessible and unstyled UI components for Vue. It serves as a design system foundation and a port of Radix UI primitives to the Vue ecosystem, focusing on providing a base for highly customizable web interfaces. The project utilizes a template-driven distribution model, delivering raw source code via a CLI rather than a compiled library. This allows for the direct modification of components using Tailwind CSS utility classes to establish a unique visual identity. The library covers accessible component architecture and custom design system implementation. It pro

Tailblocks is a collection of ready-to-use, responsive HTML blocks styled entirely with Tailwind CSS utility classes. It functions as a copy-paste component library that delivers static HTML snippets requiring no runtime library, framework, or build process to function in a project. The project distinguishes itself by offering client-side theme toggling between light and dark modes, along with a color palette picker that lets users swap Tailwind color tokens on each block before copying the code. This enables rapid prototyping by allowing developers to customize block appearance and extract f

NexT is a responsive, elegant static blog theme for Hexo that generates HTML pages from Markdown posts. It is designed as a pre-built visual design for the Hexo framework, producing mobile-friendly layouts that adapt across devices with support for dark mode and multiple visual schemes. The theme distinguishes itself through extensive customization options, including five built-in code highlighting themes for technical blog posts and a multilingual interface supporting over 15 languages. It offers configuration flexibility by allowing theme settings to be stored either in the main Hexo config

twin.macro is a build-time style compiler and utility-first styling tool that converts Tailwind CSS utility classes into optimized style objects for JavaScript styling libraries. It acts as an integration bridge, allowing developers to use Tailwind design tokens and utility classes within a component-based architecture. The project distinguishes itself by performing transformations during the compilation phase rather than at runtime. It maps utility strings to CSS-in-JS engines such as Emotion and Styled Components, resolving design tokens directly from a Tailwind configuration file to ensure

NativeWind is a utility-first CSS framework that integrates Tailwind CSS design patterns into React Native applications. It functions as a cross-platform styling system and style mapper that translates CSS-based utility classes into native style objects compatible with mobile platforms. The framework provides a responsive UI engine that implements breakpoints, dark mode management, and platform-specific modifiers. It allows for the definition of custom themes including global colors, fonts, and spacing values to maintain a consistent visual identity across different devices. The system cover

This is a static site generator and blog publishing system built on Next.js that compiles MDX content into HTML at build time. It uses file-based routing to map each page to a URL path automatically, and applies utility-first CSS styling through Tailwind CSS for visual design. The project includes a pre-built blog starter template that can be deployed with a single click to Vercel’s edge network, where it benefits from automatic optimizations and serverless function support. It features built-in analytics instrumentation that collects page view and visitor data without manual setup, and suppo

This project is a Prettier plugin and Tailwind CSS class sorter that automatically organizes utility classes into a consistent and recommended order. It functions as a frontend styling formatter and CSS utility organizer, removing duplicate classes and sorting style attributes across HTML and JavaScript files. The tool ensures consistent markup formatting by ordering utility classes within HTML attributes, template literals, JavaScript expressions, and custom framework props. It integrates with Tailwind CSS configuration files and stylesheets to synchronize sorting behavior with custom theme

cva is a TypeScript utility for defining and resolving visual variants for UI components with full type safety. It generates CSS class strings from typed variant definitions, enabling compile-time validation of component usage by deriving the union of all variant prop types from a configuration object. The library distinguishes itself through compound variant matching, which activates styles only when multiple independent variant conditions are simultaneously satisfied, merging their class names. It also provides default value propagation to ensure consistent rendering when no explicit varian

Nuxt UI is a comprehensive Vue component library built for the Nuxt ecosystem, providing over 125 production-ready, WAI-ARIA compliant components for building modern web applications. The library offers a complete design system with Tailwind CSS theming, supporting dark mode, custom color palettes, semantic color aliases, and runtime theme switching through CSS design tokens. It includes built-in internationalization for over 50 languages, server-side rendering compatibility, and a Figma kit that mirrors the code components for design-to-development consistency. The library distinguishes itse

Windi CSS is a utility-first CSS framework that generates only the CSS classes actually used in a project, scanning source files at build time to produce smaller, optimized stylesheets. It provides on-demand style generation through static analysis of HTML and template files, eliminating unused styles for leaner output. The framework offers a plugin-based extension system for adding custom utilities, variants, and design tokens without modifying the core. It includes built-in compatibility for migrating from Tailwind CSS, removing Tailwind-specific dependencies and configuration fields while

High performance, maintainable stylesheets.

Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty

Skeleton is a design system and accessible UI component library built on Tailwind CSS. It provides a collection of pre-built interactive components with built-in accessibility and state management, alongside a CSS custom properties theme engine that enables runtime theme switching and dark mode support. The project distinguishes itself through its adaptive design system approach, using CSS custom properties to create themeable tokens that integrate directly with Tailwind's utility-first framework. This allows developers to build visual design systems with customizable colors, fonts, and aesth

Skeleton هو مجموعة أدوات واجهة مستخدم (UI) لـ Svelte وTailwind ومكتبة مكونات تكيفية. يوفر نظام تصميم يركز على الأدوات لبناء واجهات ويب تفاعلية، مع التركيز على السمات المتسقة والطباعة عبر أحجام الشاشات المختلفة. تجمع مجموعة الأدوات بين المكونات المصممة مسبقاً وأدوات التخطيط لدعم تصميم واجهة المستخدم المتجاوبة والنماذج الأولية السريعة للواجهة الأمامية. كما تتيح إنشاء واجهات مستخدم تكيفية من خلال مجموعة موحدة من فئات الأدوات للتصميم والتخطيط. يغطي النظام قدرات عالية المستوى في تطوير ويب Svelte وتصميم Tailwind CSS، باستخدام نظام شبكي مرن وسمات تعتمد على متغيرات CSS.

Meet Genius