Übersicht

Der letzte Teil meiner Artikelserie beschreibt die Konfiguration von Tailwind CSS für mein Blog.

Hier noch die Links zu den anderen Artikeln dieser Serie:

Teil: Basics, GitHub Repository
Teil: AzureStatic Web App und Azure DNS
Teil: Astro
Teil: Tailwind CSS

Tailwind CSS Grundlagen

Tailwind ist ein auf dem atomic design-Prinzip basierendes CSS-Framework. Das bedeutet, vereinfacht gesagt, Tailwind besteht aus einer umfangreichen Sammlung an CSS Hilfsklassen (‘utility classes’) welche einen großen Teil der CSS-Eigenschaften abbilden. Das Hinzufügen von text-lg entspricht dem Setzen von font-size: 1.125rem bei einem Element.

Die Hilfsklassen machen Styles und den Code in den meisten Fällen einfacher lesbar, erfordert jedoch ein wenig umdenken. Mir hat das Tailwind CSS Cheat Sheet von Creative Code beim Lernen und Erkunden der Tailwind-Klassen sehr geholfen.

Tailwind installieren

Da Tailwind offiziell in Astro integriert ist, kann es direkt über den astro add befehl installiert werden. Um den Prozess besser zu verstehen habe ich es jedoch erst mal manuell installiert, und im Zuge der Installation an meine Anforderungen angepasst.

Dazu installiere ich als Erstes die entsprechenden Pakete über den NPM Paketmanager:

npm install @astrojs/tailwind tailwindcss @tailwindcss/typography

Anschließend importiere ich tailwind in der Astro-Konfigurationsdatei (astro.config.mjs) und füge es zur integrations-Eigenschaft hinzu:

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

// ...

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

Zuletzt wird noch eine Tailwind-Konfigurationsdatei tailwind.config.mjs benötigt, in welcher definiert wird, auf welche Dateien die Tailwind-Klassen angewendet werden. Ich habe zusätzlich das @tailwindcss/typography Plug-in aktiviert, um auch Markdown-Dokumente mit Tailwind-Hilfsklassen zu rendern, wie unter Style rendered Markdown with Tailwind Typography näher beschrieben.

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

Tailwind verwenden

Tailwind in Astro Layouts

Das Standard-Layout für die Impressum-Seite aus Teil 3 eignet sich gut für einen ersten Versuch mit folgenden Tailwind-Hilfsklassen:

am body-Tag
- text-gray-700 für eine dunkelgraue Schriftfarbe im gesamten Blog
am article-Tag
- mx-auto, um den Blog-Artikel immer mittig am Bildschirm anzuzueigen. (mx = “Margin” auf der X-Achse.)
- px-2 setzt das Padding auf der X-Achse auf 2 Einheiten, damit der Text auf schmalen Displays nicht ganz am Rand “klebt”.
- py-14 für 14 Einheiten Padding auf der Y-Achse, um den Artikel optisch vom Header und Footer abzugrenzen.
- max-w-3xl begrenzt die maximale Breite des Artikels auf “3x XL” (768px), um ihn auch auf sehr breiten Displays noch einfach lesbar zu machen.
- w-full setzt die tatsächliche Breite auf 100%, dh. die Breite ist nur auf sehr großen Displays auf max. 3x XL begrenzt und schrumpft darunter auf die tatsächliche Displaygröße.

<!doctype html>
<html lang="de">
  <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 und Pages

In Components und Pages können die Tailwind-Hilfsklassen genau so verwendet werden wie in Layouts. Hier ein Beispiel mit der <Footer> Komponente aus Teil 3:

bg-gray-200 gibt dem Footer-Bereich einen hellgrauen Hintergrund.
px-2 setzt das Padding auf der X-Achse auf 2 Einheiten, damit der Text auf schmalen Displays nicht ganz am Rand “klebt”.
pt-6 für 6 Einheiten Top-Padding, damit der Footer-Text etwa eine Zeile innerhalb des hellgrauen Bereichs beginnt.
pb-24 setzt das Bottom-Padding auf 24 Einheiten, für etwas Abstand zum Ende der Seite.
text-gray-500 für mittelgraue Schriftfarbe, die sich vom Artikeltext unterscheidet.
text-center zentriert den Text im Footer.
text-base setzt die Schriftgröße auf base (1rem), damit sich der Footer noch etwas besser vom Fließtext abhebt.

<footer class="px-2 pt-6 pb-24 bg-gray-200 text-gray-500 text-center text-base">
  &copy;{today.getFullYear()} Thomas Hartl | erstellt mit ♥️ und 
  // ...
</footer>

Tailwind in Astro Markdown

Markdown-Dokumente mit Tailwind zu rendern erfordert das tailwindcss-typography-Plug-in. In der tailwind.config.mjs Konfigurationsdatei habe ich das Plug-in bereits aktiviert (siehe oben).

Tailwind CSS Typography bietet ein Set an prose-Klassen, um HTML-Code, der aus anderen Quellen (z.B. Markdown-Dokumenten) geladen wird mit Tailwind zu rendern. Im einfachsten Fall wird dazu das Markdown-Element mit einem HTML-Tag umschlossen, welches die prose-Klasse besitzt:

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

In meinem Fall habe ich das bestehende Blogpost-Layout um die entsprechenden Klassen erweitert:

prose, um den Markdown-Inhalt mit Tailwind CSS zu rendern.
prose-lg, um die Schriftgröße large für den Artikeltext zu verwenden.
prose-p:text-justify setzt alle Paragraphen im Artikeltext auf Blocksatz.
prose-img:rounded für abgerundete Ecken der im Markdown-Dokument eingebundenen Bilder.

<!doctype html>
<html lang="de">
  <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>

Sonstiges

Tailwind kann natürlich noch viel mehr als die eben beschriebenen Beispiele. Zum Lernen empfehle ich, einen Blick auf die offiziellen Tailwind CSS Components zu werfen und mit den Beispielen in der Dokumentation zu experimentieren.

Migration zum Astro Framework #4: Tailwind