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.

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

  • 重用样式

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

  • 自定义整个框架

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