Tailwind CSS home page
  1. Getting Started
  2. Framework Guides

Installation

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.js

    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.

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

What to read next

Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.

  • Utility-First Fundamentals

    Using a utility-first workflow to build complex components from a constrained set of primitive utilities.

  • Responsive Design

    Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.

  • Hover, Focus & Other States

    Style elements in interactive states like hover, focus, and more using conditional modifiers.

  • Dark Mode

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

  • Reusing Styles

    Manage duplication and keep your projects maintainable by creating reusable abstractions.

  • Customizing the Framework

    Customize the framework to match your brand and extend it with your own custom styles.