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 est une bibliothèque de composants UI React Native et un système de design mobile multiplateforme. Elle fournit une collection de composants d'interface utilisateur accessibles et stylisables, conçus pour maintenir une cohérence visuelle sur différents systèmes d'exploitation mobiles. Le projet fonctionne comme une collection de composants UI headless, privilégiant l'accessibilité et la fonctionnalité aux préréglages visuels rigides. Il agit comme un framework CSS mobile Tailwind en implémentant des modèles CSS utilitaires via NativeWind pour faciliter le prototypage rapide d'interfaces. La bibliothèque couvre le développement d'UI mobile et la conception d'interfaces multiplateformes, utilisant une abstraction basée sur des primitives et un modèle de composants basé sur la composition pour construire des écrans mobiles soignés.

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 est une boîte à outils d'interface utilisateur Svelte Tailwind et une bibliothèque de composants adaptatifs. Il fournit un système de conception axé sur les utilitaires pour construire des interfaces web réactives, en se concentrant sur des thèmes et une typographie cohérents sur différentes tailles d'écran. La boîte à outils combine des composants pré-stylisés avec des outils de mise en page pour prendre en charge la conception d'UI réactive et le prototypage frontend rapide. Elle permet la création d'interfaces utilisateur adaptatives grâce à un ensemble standardisé de classes utilitaires pour le style et la mise en page. Le système couvre des capacités de haut niveau en développement web Svelte et en style Tailwind CSS, utilisant un système de grille flexible et des thèmes basés sur des variables CSS.

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

This project is a Tailwind CSS plugin that provides a normalized baseline for form controls across different web browsers. It functions as a CSS form style reset, removing inconsistent browser-default appearances from inputs, checkboxes, and radio buttons to establish a neutral foundation for utility-first styling. The system allows for a configuration-driven application strategy, where users can choose whether the style resets apply globally to all matching HTML elements or only to those with specific classes. This flexibility enables the application of normalized form styling to non-form co

tailwind-rn est un kit UI mobile utilitaire et un framework d'intégration qui permet l'utilisation des classes utilitaires Tailwind CSS pour styliser les composants React Native. Il fonctionne comme un moteur de stylisation mobile responsive qui transforme les définitions de style CSS en objets JSON compatibles avec la stylisation des vues mobiles natives. Le projet fournit un convertisseur de style CSS-vers-JSON et un moteur responsive qui adapte les styles en fonction des points de rupture d'écran, des préférences de mode sombre et de l'orientation de la fenêtre. Cela permet l'implémentation d'un design mobile responsive et d'une stylisation basée sur l'état sans écrire de feuilles de style manuelles. Le framework couvre des capacités plus larges, incluant la gestion de thèmes personnalisés pour les couleurs et l'espacement, la stylisation UI multiplateforme pour l'uniformité visuelle, et un système basé sur des fournisseurs pour distribuer les configurations de thème à travers un arbre de composants.