Global styles and CSS frameworks in Astro - Mini Project: Build & Apply

Global styles and CSS frameworks

📖 Scenario: You are building a simple Astro website that needs consistent styling across all pages. You want to add global CSS styles and also include a popular CSS framework to speed up your design process.

🎯 Goal: Create an Astro project that applies global CSS styles and integrates the Tailwind CSS framework. You will set up the global styles file, configure Tailwind, and apply some Tailwind utility classes in your Astro component.

📋 What You'll Learn

Create a global CSS file with basic body styling

Configure Tailwind CSS in the Astro project

Import the global CSS and Tailwind styles in the main layout

Use Tailwind utility classes in an Astro component

💡 Why This Matters

🌍 Real World

Web developers often need to apply consistent styles across their entire site and use CSS frameworks like Tailwind to speed up styling with ready-made utility classes.

💼 Career

Knowing how to set up global styles and integrate CSS frameworks in modern frameworks like Astro is a valuable skill for frontend and full-stack developers working on scalable web projects.

1

Create a global CSS file with basic styles

Create a file called src/styles/global.css and add CSS to set the body background color to #f0f0f0 and the font family to Arial, sans-serif.

Astro

/* Add body background color and font family styles here */
/* Your code here */

Hint

Use the CSS selector body and set background-color and font-family properties.

2

Configure Tailwind CSS in the Astro project

Create a file called tailwind.config.cjs in the project root with the content: module.exports = { content: ['./src/**/*.{astro,js,jsx,ts,tsx}'], theme: { extend: {} }, plugins: [] } to configure Tailwind to scan your source files.

Astro

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

// Add Tailwind config file with content scanning setup
// Your code here

Hint

Use CommonJS export syntax and specify the content array with your source file patterns.

3

Import global CSS and Tailwind styles in the main layout

In src/layouts/BaseLayout.astro, import the global CSS file with import '../styles/global.css'; and add @tailwind base;, @tailwind components;, and @tailwind utilities; directives inside a <style global> block.

Astro

---
import '../styles/global.css';
// Add Tailwind directives inside  below
// Your code here
---


  
    
    
    Astro Site
  
  
    
  

Hint

Use the import statement at the top and add Tailwind directives inside a <style global> block.

4

Use Tailwind utility classes in an Astro component

Create a component src/components/Header.astro with a <header> element that has Tailwind classes bg-blue-600, text-white, p-4, and contains an <h1> with the text Welcome to Astro.

Astro

Hint

Use the class attribute on the <header> with the specified Tailwind classes and add the heading text inside an <h1>.

Practice

1. What is the main purpose of global styles in an Astro project?

easy

A. To optimize images automatically

B. To add JavaScript functionality to components

C. To create isolated styles for a single component only

D. To apply CSS rules across the entire website for consistent design

Solution

1. Step 1: Understand what global styles do

   Global styles are CSS rules that apply to the whole website, ensuring a consistent look and feel.

2. Step 2: Compare options

   Only To apply CSS rules across the entire website for consistent design describes applying CSS site-wide. Options B, C, and D describe unrelated tasks.

3. Final Answer:

   To apply CSS rules across the entire website for consistent design -> Option D

4. Quick Check:

   Global styles = site-wide CSS [OK]

Hint: Global styles affect the whole site, not just parts [OK]

Common Mistakes:

• Confusing global styles with component-level styles
• Thinking global styles add JavaScript
• Believing global styles optimize images

2. Which is the correct way to import a global CSS file in an Astro project?

easy

A. @import './styles/global.css'; inside a JavaScript file

B. <link rel="stylesheet" href="./styles/global.css" /> inside src/pages/index.astro

C. import './styles/global.css'; inside a component script

D. require('./styles/global.css'); inside a component script

Solution

1. Step 1: Identify Astro's recommended import method

   Astro supports importing CSS files directly in component scripts using ES module syntax like import './styles/global.css';.

2. Step 2: Evaluate other options

   <link rel="stylesheet" href="./styles/global.css" /> inside src/pages/index.astro uses HTML link tag which can work but is less common in Astro root layouts. @import './styles/global.css'; inside a JavaScript file uses CSS syntax incorrectly in JS. require('./styles/global.css'); inside a component script uses CommonJS require which is not valid in Astro's ES module environment.

3. Final Answer:

   import './styles/global.css'; inside a component script -> Option C

4. Quick Check:

   Astro uses ES module imports for CSS [OK]

Hint: Use ES module import syntax for CSS in Astro [OK]

Common Mistakes:

• Using CommonJS require instead of import
• Trying to import CSS with @import in JS
• Placing <link> tags in wrong Astro files

3. Given this Astro root layout code snippet, what will be the background color of the page?

---
import '../styles/global.css';
---

  
    
  

And the global.css contains:

body { background-color: #f0f0f0; }

medium

A. White background

B. Light gray background (#f0f0f0)

C. No background color applied

D. Black background

Solution

1. Step 1: Understand global CSS import effect

   Importing global.css in the root layout applies its styles to the whole page, including the body tag.

2. Step 2: Check CSS rule

   The CSS sets body { background-color: #f0f0f0; }, which is a light gray color.

3. Final Answer:

   Light gray background (#f0f0f0) -> Option B

4. Quick Check:

   Imported global CSS sets body background [OK]

Hint: Global CSS in root layout affects body styles [OK]

Common Mistakes:

• Assuming default white background overrides global CSS
• Thinking CSS won't apply without inline styles
• Confusing slot content with styles

4. You tried importing Tailwind CSS in your Astro project by adding import 'tailwindcss/tailwind.css'; in a component, but styles don't apply. What is the likely issue?

medium

A. Tailwind CSS requires setup via PostCSS or Astro integration, not just import

B. You must import Tailwind CSS in every component separately

C. Tailwind CSS files must be renamed to .astro to work

D. Tailwind CSS only works with class components

Solution

1. Step 1: Understand Tailwind CSS integration in Astro

   Tailwind CSS needs build setup (like PostCSS or Astro Tailwind integration) to generate styles, not just importing CSS file.

2. Step 2: Evaluate other options

   You must import Tailwind CSS in every component separately is wrong because importing in every component is inefficient and unnecessary. Tailwind CSS files must be renamed to .astro to work is incorrect; CSS files don't become Astro files. Tailwind CSS only works with class components is false; Tailwind works with any component type.

3. Final Answer:

   Tailwind CSS requires setup via PostCSS or Astro integration, not just import -> Option A

4. Quick Check:

   Tailwind needs build setup, not just import [OK]

Hint: Tailwind needs build config, not just CSS import [OK]

Common Mistakes:

• Importing Tailwind CSS without build setup
• Thinking Tailwind works only in certain components
• Renaming CSS files incorrectly

5. You want to use Bootstrap CSS framework globally in your Astro site. Which is the best way to do this?

hard

A. Add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> in your root layout's <head>

B. Import Bootstrap CSS in every component separately

C. Copy Bootstrap CSS into each component's style tag

D. Use Bootstrap JavaScript files only without CSS

Solution

1. Step 1: Understand global CSS inclusion for frameworks

   Including Bootstrap CSS globally via a CDN link in the root layout's <head> ensures all pages get the styles.

2. Step 2: Evaluate other options

   Import Bootstrap CSS in every component separately is inefficient and redundant. Copy Bootstrap CSS into each component's style tag is impractical and breaks DRY principle. Use Bootstrap JavaScript files only without CSS misses CSS, so no styles apply.

3. Final Answer:

   Add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> in your root layout's <head> -> Option A

4. Quick Check:

   Global CSS frameworks via CDN link in root layout [OK]

Hint: Use CDN link in root layout head for global CSS frameworks [OK]

Common Mistakes:

• Importing CSS in every component instead of once globally
• Copy-pasting CSS into components
• Ignoring CSS and using only JS files