Question

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

他快速、灵活、可靠，没有运行时负担。

安装

• Tailwind CLI

• Using PostCSS

• Framework Guides

• Play CDN

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）直接让你的网站支持夜间模式。

• 重用样式

  通过创建可重用的抽象来管理冗余并保持项目的可维护性。

• 自定义整个框架

  通过自定义整个框架使其匹配你的需求；使用你的自定义样式对其进行扩展。