Tailwind CSS integration in Astro - Mini Project: Build & Apply

Tailwind CSS Integration in Astro

📖 Scenario: You are building a simple Astro website and want to style it using Tailwind CSS. Tailwind CSS helps you quickly add beautiful styles with utility classes.

🎯 Goal: Integrate Tailwind CSS into an Astro project and create a styled header using Tailwind classes.

📋 What You'll Learn

Create the Tailwind CSS configuration file

Add Tailwind directives to a CSS file

Configure Astro to use Tailwind CSS

Create a header component styled with Tailwind CSS classes

💡 Why This Matters

🌍 Real World

Tailwind CSS is widely used to quickly style websites with consistent, responsive designs without writing custom CSS.

💼 Career

Knowing how to integrate Tailwind CSS in modern frameworks like Astro is valuable for frontend developer roles focused on fast, maintainable UI development.

1

Create Tailwind CSS configuration file

Create a file named tailwind.config.cjs with the exact content: module.exports = { content: ['./src/**/*.{astro,html,js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], }

Astro

# Create tailwind.config.cjs file with the required content
# Your code here

Hint

This file tells Tailwind which files to scan for class names.

2

Add Tailwind directives to CSS file

Create a CSS file named src/styles/global.css and add these three lines exactly: @tailwind base;, @tailwind components;, and @tailwind utilities;

Astro

/* Add Tailwind directives below */
# Your code here

Hint

These lines import Tailwind's base styles, components, and utilities.

3

Configure Astro to use Tailwind CSS

In the astro.config.mjs file, import tailwind from @astrojs/tailwind and add tailwind() to the integrations array inside defineConfig.

Astro

// Import tailwind and add to integrations in astro.config.mjs
# Your code here

Hint

This tells Astro to use Tailwind CSS during build.

4

Create a styled header component

Create a file src/components/Header.astro with a <header> element. Inside it, add an <h1> with text Welcome to Astro and apply Tailwind classes text-3xl font-bold text-center p-6 to the <h1>.

Astro

---

# Your code here

Hint

This header will show a big bold centered title with padding.