安装
开始使用 Tailwind CSS
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板中的类名,生成相应的样式,然后将它们写入静态 CSS 文件。
它快速、灵活、可靠——无需运行时间。
框架指南
特定于框架的指南涵盖了我们在许多流行环境中安装 Tailwind CSS 的推荐方法。
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 Fundamentals
使用实用程序优先的工作流程从一组受限的原始实用程序构建复杂组件。
Responsive Design
使用响应式修饰符构建可适应任何屏幕尺寸的完全响应式用户界面。
Hover, Focus & Other States
使用条件修饰符来为悬停、聚焦等交互状态下的元素设置样式。
Dark Mode
使用暗模式修饰符直接在 HTML 中优化您的网站以适应暗模式。
Reusing Styles
通过创建可重复使用的抽象来管理重复并保持项目的可维护性。
Customizing the Framework
定制框架来匹配您的品牌并使用您自己的自定义风格进行扩展。