Install Tailwind CSS in Astro: Easy Guide

Jan 22, 2024 - 4 min read

Hey Astro developers!

Tailwind CSS is a popular utility-first framework that empowers you to rapidly style your web applications with pre-defined classes. Integrating Tailwind with your Astro project offers a fantastic way to streamline your development workflow and achieve beautiful, responsive designs.

This guide provides a clear roadmap for installing Tailwind CSS in your Astro project, giving you the flexibility to choose between the automated astro add command or a more granular manual approach.

Prerequisites: Before we dive in, make sure you have an existing Astro project set up.

1. Automatic Installation (Recommended):

Astro offers a handy astro add command to automate the integration process. Open your terminal and navigate to your project directory. Then, run the following command:

npx astro add tailwind

This command will take care of installing the necessary packages (@astrojs/tailwind and tailwindcss) and configuring your Astro project to use Tailwind CSS.

Usage

When you install the integration, Tailwind utility classes should be ready to go right away.

2. Manual Installation

If you prefer more control over the setup, follow these steps:

Install Packages:

Open your terminal and navigate to your project directory. Run the following command to install the required packages:

npm install @astrojs/tailwind tailwindcss

Configure Astro:

Update your astro.config.mjs file to include the Tailwind CSS integration. Here’s an example:

# astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  // ...
  integrations: [tailwind()],
});

Create Tailwind Configuration:

Generate a basic Tailwind configuration file using this command in your terminal:

npx tailwindcss init

This will create a tailwind.config.mjs file in your project’s root directory.

Configure Tailwind Configuration File:

Open the tailwind.config.mjs file and add the following basic configuration:

# tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Congratulations! You’ve successfully installed Tailwind CSS in your Astro project. Now you’re ready to leverage Tailwind’s utility classes to style your Astro components with ease. Stay tuned for future articles where we’ll explore advanced Tailwind CSS techniques within Astro!