Awesome GitHub RepositoriesUtility-First CSS Frameworks

Slidev is a markdown-based presentation framework designed for creating interactive, web-based slide decks. It functions as a static site generator that transforms plain text files into modular UI components, allowing authors to maintain version control while building professional presentations. The engine provides a browser-based runtime that manages slide navigation, animated transitions, and the live execution of code blocks. What distinguishes Slidev is its developer-centric approach to technical presentations. It features built-in support for syntax highlighting, mathematical typesetting

UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia

Soybean Admin is a type-safe frontend management boilerplate and dashboard template built with Vue 3, Vite, and TypeScript. It provides a pre-configured foundation for creating enterprise administrative interfaces, utilizing the NaiveUI component framework and UnoCSS for utility-first styling. The project distinguishes itself through automated workflow tools, including file-system-based route generation and a command-line interface for automating git commits and project deployments. It implements a comprehensive security model featuring both static and dynamic role-based access control to res

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

TW-Elements is a Tailwind CSS component library and responsive UI kit providing a collection of pre-styled elements and templates. It functions as an interactive web element set and a customizable theme system for building website interfaces and landing pages. The project enables rapid frontend prototyping through a library of functional interface pieces, including modals, navigation bars, and forms. It provides a set of design blocks and sections specifically for creating mobile-first layouts. The library covers responsive web design and Tailwind CSS UI development. This includes the implem

Tachyons is a utility-first CSS framework and functional CSS library. It provides a collection of single-purpose classes used to style elements and build layouts without writing custom CSS. The framework centers on a mobile-first responsive design system and a nestable grid architecture that adapts layouts across different screen sizes. It includes accessible color palettes and schemes designed to meet visual contrast and accessibility standards. The system provides tools for utility-first styling, responsive layout management, and visual debugging to resolve alignment and spacing issues.

react-native-reusables ist eine React Native UI-Komponentenbibliothek und ein plattformübergreifendes mobiles Designsystem. Es bietet eine Sammlung zugänglicher und stylbarer Benutzeroberflächenkomponenten, die darauf ausgelegt sind, die visuelle Konsistenz über verschiedene mobile Betriebssysteme hinweg zu wahren. Das Projekt fungiert als Headless-UI-Komponentensammlung, die Barrierefreiheit und Funktionalität über starre visuelle Vorgaben stellt. Es agiert als Tailwind CSS Mobile-Framework, indem es Utility-First-CSS-Muster über NativeWind implementiert, um schnelles Interface-Prototyping zu erleichtern. Die Bibliothek deckt die mobile UI-Entwicklung und das plattformübergreifende Interface-Design ab und nutzt eine primitive Abstraktion sowie ein kompositionsbasiertes Komponentenmodell, um ausgefeilte mobile Bildschirme zu erstellen.

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 production-ready enterprise boilerplate and starter for building high-performance web applications with Next.js. It provides a foundational architecture for large-scale application bootstrapping, combining a TypeScript web starter with a pre-configured project structure and professional toolset. The project distinguishes itself through an integrated suite of operational tools, including CI/CD deployment pipelines, infrastructure-as-code provisioning, and a component-driven UI development sandbox. It incorporates a utility-first styling architecture using Tailwind CSS and a l

The United States Web Design System is a government design system and accessible UI framework. It provides a collection of standardized CSS and JavaScript components, along with a CSS component library, specifically designed for building consistent federal government websites. The system allows for custom CSS theme development through the use of design tokens for colors, spacing, and typography. Users can customize visual themes and compile custom styles to maintain a unified brand identity across multiple web properties. The framework covers responsive interface design and web accessibility

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

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

Tailwind Starter Kit is a copy-paste UI component library built with Tailwind CSS, designed to accelerate front-end development by providing pre-built, reusable interface blocks that can be inserted directly into any project without package managers or build tools. It delivers identical UI components as native code for React, Vue, Angular, and plain HTML, making it a framework-agnostic resource for assembling responsive layouts. The kit structures its UI blocks as plain Tailwind markup that AI code generators can parse and reproduce from natural-language descriptions, making it compatible wit

David AI is a UI development toolkit that combines AI-powered page generation with a library of pre-built, copy-paste-ready components built on Tailwind CSS. At its core, it offers an AI builder that can generate complete landing pages and dashboards from natural language prompts, outputting clean, responsive Tailwind CSS code. The project provides a comprehensive collection of UI components—including buttons, forms, navigation elements, and data displays—that can be assembled into full page sections like hero blocks, pricing tables, and dashboards. The toolkit distinguishes itself through a

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 ist ein Svelte Tailwind UI-Toolkit und eine adaptive Komponentenbibliothek. Es bietet ein Utility-First-Designsystem für den Aufbau reaktiver Web-Interfaces, wobei der Fokus auf konsistenten Themes und Typografie über verschiedene Bildschirmgrößen hinweg liegt. Das Toolkit kombiniert vorgestylte Komponenten mit Layout-Tools, um responsives UI-Design und schnelles Frontend-Prototyping zu unterstützen. Es ermöglicht die Erstellung adaptiver Benutzeroberflächen durch einen standardisierten Satz von Utility-Klassen für Styling und Layout. Das System deckt High-Level-Funktionen in der Svelte-Webentwicklung und beim Tailwind CSS-Styling ab und nutzt ein flexibles Grid-System sowie CSS-Variablen-basiertes Theming.

Astrowind is a high-performance site framework and bootstrapping tool designed for building marketing sites, professional portfolios, and high-conversion landing pages. It utilizes a utility-first CSS architecture and a component-based UI library to assemble responsive websites. The project specializes in conversion rate optimization through targeted templates for lead generation, product sales, subscription captures, and pre-launch teasers. It includes specific infrastructure for static blogging, utilizing markdown-based content modeling and rendering for long-form articles. The framework c

Dieses Projekt ist ein Tailwind-CSS-Plugin, das eine normalisierte Basis für Formularsteuerelemente über verschiedene Webbrowser hinweg bereitstellt. Es fungiert als CSS-Formular-Style-Reset, das inkonsistente browserseitige Standarddarstellungen von Inputs, Checkboxen und Radio-Buttons entfernt, um ein neutrales Fundament für Utility-First-Styling zu etablieren. Das System ermöglicht eine konfigurationsgesteuerte Anwendungsstrategie, bei der Benutzer wählen können, ob die Style-Resets global auf alle passenden HTML-Elemente oder nur auf solche mit spezifischen Klassen angewendet werden. Diese Flexibilität ermöglicht die Anwendung normalisierter Formular-Styles auf Nicht-Formular-Komponenten, um visuelle Konsistenz zu wahren. Das Plugin integriert sich mit einer zentralen Theme-Konfiguration, um Reset-Werte auf Design-Tokens abzubilden. Es nutzt PostCSS-basiertes Style-Injection, um CSS-Regeln während des Build-Prozesses zu generieren, was die Erstellung benutzerdefinierter Formular-Komponenten unter Verwendung atomarer Utility-Klassen erleichtert.

tailwind-rn ist ein Utility-First-Mobile-UI-Kit und Integrations-Framework, das die Verwendung von Tailwind-CSS-Utility-Klassen zum Stylen von React-Native-Komponenten ermöglicht. Es fungiert als responsive Mobile-Styling-Engine, die CSS-Stildefinitionen in JSON-Objekte transformiert, die mit nativem Mobile-View-Styling kompatibel sind. Das Projekt bietet einen CSS-zu-JSON-Stilkonverter und eine responsive Engine, die Stile basierend auf Screen-Breakpoints, Dark-Mode-Einstellungen und Viewport-Ausrichtung anpasst. Dies ermöglicht die Implementierung von mobilem responsivem Design und zustandsbasiertem Styling, ohne manuelle Stylesheets schreiben zu müssen. Das Framework deckt breitere Funktionen ab, einschließlich benutzerdefiniertem Theme-Management für Farben und Abstände, plattformübergreifendem UI-Styling für visuelle Einheitlichkeit und einem provider-basierten System zur Verteilung von Theme-Konfigurationen über einen Komponentenbaum hinweg.