Skip to content
IT // Adventures

Migration to the Astro Framework #4: Tailwind

Configuring Tailwind CSS for my Astro blog.

4 min read
Contents

Overview

The last part of my article series describes how I configured Tailwind CSS for my blog.

Here are the links to the other articles in this series:

  1. Part: Basics, GitHub Repository
  2. Part: Azure Static Web App and Azure DNS
  3. Part: Astro
  4. Part: Tailwind CSS

Tailwind CSS Basics

Tailwind is a CSS framework based on the atomic design principle. Put simply, this means Tailwind consists of an extensive collection of CSS utility classes that cover a large share of CSS properties. Adding text-lg to an element is equivalent to setting font-size: 1.125rem.

In most cases utility classes make styles and code easier to read, but they take a bit of getting used to. The Tailwind CSS Cheat Sheet by Creative Tim helped me a lot when learning and exploring the Tailwind classes.

Installing Tailwind

Since Tailwind is officially integrated into Astro, it can be installed directly with the astro add command. To understand the process better, though, I first installed it manually and adapted it to my requirements along the way.

First, I install the required packages with the NPM package manager:

npm install @astrojs/tailwind tailwindcss @tailwindcss/typography

Then I import tailwind in the Astro configuration file (astro.config.mjs) and add it to the integrations property:

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

// ...

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

Finally, a Tailwind configuration file tailwind.config.mjs is needed, which defines the files the Tailwind classes apply to. I also enabled the @tailwindcss/typography plugin so Markdown documents can be rendered with Tailwind utility classes too, as described in Style rendered Markdown with Tailwind Typography.

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

Using Tailwind

Tailwind in Astro Layouts

The default layout for the imprint page from part 3 is a good first test for the following Tailwind utility classes:

  • on the body tag
    • text-gray-700 for a dark gray text color across the whole blog
  • on the article tag
    • mx-auto to always center the blog article on the screen. (mx = “margin” on the X axis.)
    • px-2 sets the padding on the X axis to 2 units, so the text doesn’t “stick” to the edge on narrow displays.
    • py-14 for 14 units of padding on the Y axis, to visually separate the article from the header and footer.
    • max-w-3xl limits the maximum width of the article to “3x XL” (768px), keeping it easy to read even on very wide displays.
    • w-full sets the actual width to 100%, i.e. the width is only capped at 3x XL on very large displays and shrinks to the actual display size below that.
<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
  </head>
  <body class="text-gray-700">
    <Header />
    <article class="mx-auto px-2 py-14 max-w-3xl w-full">
      <slot />
    </article>
    <Footer />
  </body>
</html>

Tailwind in Astro Components and Pages

In components and pages, the Tailwind utility classes can be used exactly as in layouts. Here is an example with the <Footer> component from part 3:

  • bg-gray-200 gives the footer area a light gray background.
  • px-2 sets the padding on the X axis to 2 units, so the text doesn’t “stick” to the edge on narrow displays.
  • pt-6 for 6 units of top padding, so the footer text starts about one line inside the light gray area.
  • pb-24 sets the bottom padding to 24 units, for some space at the end of the page.
  • text-gray-500 for a medium gray text color that differs from the article text.
  • text-center centers the text in the footer.
  • text-base sets the font size to base (1rem), so the footer stands out a little more from the body text.
<footer class="bg-gray-200 px-2 pt-6 pb-24 text-center text-base text-gray-500">
  &copy;{today.getFullYear()} Thomas Hartl | made with ♥️ and // ...
</footer>

Tailwind in Astro Markdown

Rendering Markdown documents with Tailwind requires the tailwindcss-typography plugin. I already enabled the plugin in the tailwind.config.mjs configuration file (see above).

Tailwind CSS Typography provides a set of prose classes to render HTML from other sources (e.g. Markdown documents) with Tailwind. In the simplest case, the Markdown element is wrapped in an HTML tag with the prose class:

<article class="prose">{{ markdown }}</article>

In my case, I extended the existing blog post layout with the corresponding classes:

  • prose to render the Markdown content with Tailwind CSS.
  • prose-lg to use the large font size for the article text.
  • prose-p:text-justify sets all paragraphs in the article text to justified.
  • prose-img:rounded for rounded corners on images embedded in the Markdown document.
<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
  </head>
  <body class="text-gray-700">
    <Header />
    <article class="mx-auto px-2 py-14 max-w-3xl w-full prose prose-lg prose-p:text-justify prose-img:rounded">
      <slot />
    </article>
    <Footer />
  </body>
</html>

Miscellaneous

Of course, Tailwind can do much more than the examples just described. To learn more, I recommend taking a look at the official Tailwind CSS Components and experimenting with the examples in the documentation.