Setting Up Tailwind CSS with Astro

Video Tutorial

Step 1: Create a New Astro Project

Run the following commands to set up a new Astro project:

npm create astro@latest astro-app

Step 2: Installation

Method 1: Manual Installation

If you prefer a more hands-on approach, you can manually integrate Tailwind CSS into your Astro project. Here’s how:

1. Install the required packages

Use your package manager to install the necessary dependencies:

npm install @astrojs/tailwind tailwindcss

2. Update Astro configuration

Modify your astro.config.mjs file to include the Tailwind integration:

astro.config.mjs

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

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

3. Generate a Tailwind configuration file

Run the following command to create a basic configuration file:

npx tailwindcss init

4. Set up Tailwind’s configuration

Add the following content to your tailwind.config.mjs file:

tailwind.config.mjs

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

Step 3: Create Global CSS File

1. Create global.css file:

src/styles/globals.css

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

2. Import global.css in RootLayout.tsx:

src/layouts/RootLayout.tsx

---
import "@/styles/globals.css"
---

<!Doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <meta name="generator" content={Astro.generator} />
  <title>Astro App</title>

  <!-- Favicon File -->
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>

  <!-- Page Content -->
  <slot />

</body>
</html>

Step 4: Start Using Tailwind CSS

Tailwind is ready! Add utility classes directly to elements in .astro, .html, or framework components, like this:

---
---

<main class="p-5">
  <h1 class="text-2xl font-bold text-center text-blue-500">
    Welcome to Astro with Tailwind CSS!
  </h1>
</main>

Step 5: Start the Development Server

To see Tailwind CSS in action, start the development server:

npm run dev

Visit http://localhost:4321 to preview your project. Any changes to your files will reflect immediately in the browser.

Conclusion

In this post, we explored two simple methods to set up Tailwind CSS with your Astro application: the manual approach and the Astro CLI utility. Both methods equip you to harness Tailwind's powerful utility classes for efficient and responsive styling. Whether you're building from scratch or enhancing an existing project, Tailwind makes designing seamless and enjoyable. Start creating with Astro and Tailwind today!

CodifyBlog