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 是一个 React Native UI 组件库和跨平台移动设计系统。它提供了一系列可访问且可样式化的用户界面组件，旨在保持不同移动操作系统之间的视觉一致性。 该项目充当无头（headless）UI 组件集合，优先考虑可访问性和功能性，而非僵化的视觉预设。它通过 NativeWind 实现实用优先（utility-first）的 CSS 模式，充当 Tailwind CSS 移动框架，以促进快速界面原型设计。 该库涵盖了移动 UI 开发和跨平台界面设计，利用基于原语（primitive）的抽象和基于组合的组件模型来构建精美的移动屏幕。

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 是一个 Svelte Tailwind UI 工具包和自适应组件库。它提供了一个实用优先的设计系统，用于构建响应式 Web 界面，专注于在各种屏幕尺寸上保持一致的主题和排版。 该工具包将预设样式的组件与布局工具相结合，以支持响应式 UI 设计和快速前端原型开发。它通过一套标准化的样式和布局实用类，实现了自适应用户界面的创建。 该系统涵盖了 Svelte Web 开发和 Tailwind CSS 样式的高级功能，利用灵活的网格系统和基于 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

这是一个 Tailwind CSS 插件，为不同 Web 浏览器中的表单控件提供了标准化的基准。它作为一个 CSS 表单样式重置工具，移除了输入框、复选框和单选按钮中不一致的浏览器默认外观，为实用优先（utility-first）的样式设计建立了中性基础。 该系统允许采用配置驱动的应用程序策略，用户可以选择样式重置是全局应用于所有匹配的 HTML 元素，还是仅应用于具有特定类的元素。这种灵活性使得将标准化的表单样式应用于非表单组件成为可能，从而保持视觉一致性。 该插件与中央主题配置集成，将重置值映射到设计令牌（design tokens）。它利用基于 PostCSS 的样式注入在构建过程中生成 CSS 规则，从而促进使用原子类创建自定义表单组件。

tailwind-rn 是一个实用优先的移动 UI 工具包和集成框架，允许使用 Tailwind CSS 实用类来设置 React Native 组件的样式。它作为一个响应式移动样式引擎，将 CSS 样式定义转换为与原生移动视图样式兼容的 JSON 对象。 该项目提供了一个 CSS 转 JSON 样式转换器和一个响应式引擎，根据屏幕断点、深色模式偏好和视口方向调整样式。这使得在无需编写手动样式表的情况下实现移动响应式设计和基于状态的样式设置成为可能。 该框架涵盖了更广泛的功能，包括用于颜色和间距的自定义主题管理、用于视觉统一的跨平台 UI 样式设置，以及用于在组件树中分发主题配置的基于提供程序的系统。