Install Tailwind CSS with Astro

Setting up Tailwind CSS in an Astro project.

Using command (v5.2.0 or later)
Manual installation

Create your project

Start by creating a new Astro project if you don't have one set up already. The most common approach is to use create astro.

Terminal

npm create astro@latest my-project
cd my-project

Run `astro add` command

Run this command to install all the necessary dependencies, create a ./src/styles/global.css file, and add the plugin to your Astro configuration file.

Terminal

npx astro add tailwind

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Start using Tailwind's utility classes to style your content while making sure to import the newly created CSS file.

index.astro

---
import "../styles/global.css";
---
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Install Tailwind CSS with Astro

Using command (v5.2.0 or later)

Manual installation

Create your project

Run `astro add` command

Start your build process

Start using Tailwind in your project