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 es una biblioteca de componentes de interfaz de usuario para React Native y un sistema de diseño móvil multiplataforma. Proporciona una colección de componentes de interfaz de usuario accesibles y personalizables, diseñados para mantener la consistencia visual en diferentes sistemas operativos móviles. El proyecto funciona como una colección de componentes UI headless, priorizando la accesibilidad y la funcionalidad sobre preajustes visuales rígidos. Actúa como un framework móvil de Tailwind CSS al implementar patrones de CSS utility-first a través de NativeWind para facilitar la creación rápida de prototipos de interfaz. La biblioteca cubre el desarrollo de UI móvil y el diseño de interfaces multiplataforma, utilizando una abstracción basada en primitivas y un modelo de componentes basado en composición para construir pantallas móviles pulidas.

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 es un toolkit de UI y biblioteca de componentes adaptativos para Svelte y Tailwind. Proporciona un sistema de diseño utility-first para construir interfaces web reactivas, centrándose en temas y tipografía consistentes en varios tamaños de pantalla. El toolkit combina componentes pre-estilizados con herramientas de diseño para admitir el diseño de UI responsivo y la creación rápida de prototipos frontend. Permite la creación de interfaces de usuario adaptativas a través de un conjunto estandarizado de clases de utilidad para estilos y diseño. El sistema cubre capacidades de alto nivel en desarrollo web con Svelte y estilos con Tailwind CSS, utilizando un sistema de rejilla flexible y temas basados en 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

Este proyecto es un plugin de Tailwind CSS que proporciona una base normalizada para controles de formulario a través de diferentes navegadores web. Funciona como un reset de estilos de formulario CSS, eliminando las apariencias predeterminadas inconsistentes de los navegadores en inputs, checkboxes y botones de radio para establecer una base neutral para el estilo utility-first. El sistema permite una estrategia de aplicación basada en configuración, donde los usuarios pueden elegir si los resets de estilo se aplican globalmente a todos los elementos HTML coincidentes o solo a aquellos con clases específicas. Esta flexibilidad permite la aplicación de estilos de formulario normalizados a componentes que no son de formulario para mantener la consistencia visual. El plugin se integra con una configuración de tema central para mapear valores de reset a tokens de diseño. Utiliza inyección de estilos basada en PostCSS para generar reglas CSS durante el proceso de construcción, facilitando la creación de componentes de formulario personalizados usando clases de utilidad atómicas.

tailwind-rn es un kit de interfaz de usuario móvil y framework de integración de utilidad primero que permite el uso de clases de utilidad de Tailwind CSS para dar estilo a componentes de React Native. Funciona como un motor de estilo móvil receptivo que transforma definiciones de estilo CSS en objetos JSON compatibles con el estilo de vista móvil nativo. El proyecto proporciona un convertidor de estilo CSS a JSON y un motor receptivo que adapta los estilos según los puntos de interrupción de pantalla, preferencias de modo oscuro y orientación de la ventana gráfica. Esto permite la implementación de diseño móvil receptivo y estilo basado en estado sin escribir hojas de estilo manuales. El framework cubre capacidades más amplias, incluyendo gestión de temas personalizados para colores y espaciado, estilo de interfaz de usuario multiplataforma para uniformidad visual y un sistema basado en proveedor para distribuir configuraciones de tema a través de un árbol de componentes.