Framework Guides

安装

Framework-specific guides that cover our recommended approach to installing Tailwind CSS in a number of popular environments.

Next.js
Full-featured React framework with great developer experience.
Laravel
PHP web application framework with expressive, elegant syntax.
Vite
Fast and modern development server and build tool.
Nuxt
Intuitive Vue framework for building universal applications.
Gatsby
Framework for building static sites with React and GraphQL.
SolidJS
A tool for building simple, performant, and reactive user interfaces.
SvelteKit
The fastest way to build apps of all sizes with Svelte.js.
Angular
Platform for building mobile and desktop web applications.
Ruby on Rails
Full-stack framework with all the tools needed to build amazing web apps.
Remix
Full stack framework focused on web fundamentals and modern UX.
Phoenix
A framework to build rich, interactive applications with Elixir.
Parcel
The zero-configuration build tool for the web.
Symfony
A PHP framework to create websites and web applications.
Meteor
The full stack JavaScript framework for developing cross-platform apps.
Create React App
CLI tool for scaffolding a new single-page React application.
AdonisJS
A fully featured web framework for Node.js.
Ember.js
A JavaScript framework for ambitious web developers.
Astro
The all-in-one web framework designed for speed.
Qwik
Build instantly-interactive web apps without effort.
Rspack
A fast Rust-based web bundler.

Don't see your framework of choice? Try using Tailwind CLI or installing Tailwind as a PostCSS plugin instead.

熟悉一些让 Tailwind CSS 区别于传统方式编写 CSS 的核心概念。

工具类优先（Utility-First）的基本原理
遵循工具类优先的流程（utility-first workflow）并基于一套具有约束性的基本工具类来构建复杂的组件。
响应式设计
使用响应式布局标识符（responsive modifiers）构建完全支持响应式布局的用户界面，以适应任何大小的屏幕。
鼠标悬停、聚焦以及其他状态
使用条件标识符（conditional modifiers）可以为处于交互状态（如鼠标悬停、聚焦等）中的元素设置样式。
夜间模式（Dark Mode）
通过在 HTML 代码中添加夜间模式标识符（dark mode modifier）直接让你的网站支持夜间模式。
重用样式
通过创建可重用的抽象来管理冗余并保持项目的可维护性。
自定义整个框架
通过自定义整个框架使其匹配你的需求；使用你的自定义样式对其进行扩展。