1. 快速入门
  2. 框架指南

框架指南

特定于框架的指南涵盖了我们在许多流行环境中安装 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

    定制框架来匹配您的品牌并使用您自己的自定义风格进行扩展。