Webframework: Astro 5.2 bringt Support für Tailwind CSS 4.0

Das JavaScript-Webframework Astro hat mit Version 5.2 das erste Minor Release des Jahres erhalten. Darin bringt es eine Anbindung an Tailwind CSS 4.0, einen neuen Umgang mit Trailing Slashes und zwei experimentelle Features in Bezug auf Konfigurationseinstellungen und React-Streaming.

Automatische Umleitung für Trailing Slashes

Wie das Astro-Team ausführt, ist die Verwendung von Trailing Slashes – also Schrägstrichen am Ende einer URL – in der Webentwicklung umstritten. Jedoch sei man sich darüber einig, dass ihr Einsatz konsistent sein solle, um sich nicht negativ auf die Suchmaschinenoptimierung und die Nutzererfahrung auszuwirken.

Bisher erlaubte Astro das Konfigurieren, ob Routen mit oder ohne Trailing Slash verwendet werden sollten und gab bei der nicht ausgewählten Option eine "not found"-Seite zurück oder überließ dem Host den Umgang mit dem Konflikt. Die neue Astro-Version 5.2 geht anders damit um, denn sie nimmt automatisch die Umleitung zum korrekten Pfad vor, wie er in der trailingSlash-Option in astro.config.mjs definiert ist.

Diese Option lässt sich wie folgt setzen:

export default defineConfig({
  adapter: node({ mode: 'standalone' }),
  trailingSlash: 'never', // or 'always'
});

In der Praxis spielt es dann keine Rolle mehr, ob User /about/, /about oder gar /about/// aufrufen, da alle Varianten zur korrekten Webseite führen.

Vereinfachter Tailwind-CSS-Support

In der ebenfalls kürzlich erschienenen Version Tailwind CSS 4.0 brachte das Open-Source-CSS-Framework das neue Vite-Plug-in @tailwindcss/vite mit. Astro 5.2 enthält nativen Support für dieses Plug-in und vereinfacht somit die Anbindung an Tailwind CSS. Mit dem Befehl astro add tailwind lässt es sich in Astro verwenden und erstellt eine Default-CSS-Datei, die Tailwind-Styles importiert.

Daher gilt die bisherige Variante, die @astrojs/tailwind-Integration, nun als veraltet (deprecated). Um auf Tailwind CSS 4.0 zu aktualisieren, müssen Entwicklerinnen und Entwickler diese Integration deinstallieren und entweder den obigen Befehl nutzen oder eine manuelle Installation vornehmen.

Experimentelle Features für Konfiguration und React-Streaming

Neben weiteren Updates und Bugfixes finden sich zwei experimentelle Features in Astro 5.2. Dazu zählt das neue virtuelle Modul astro:config. Mit diesem sollen sich die wichtigsten Konfigurationseinstellungen von einem beliebigen Ort im Projekt aus einsehen lassen. In Zukunft soll astro:config zum Standard werden.

Das zweite experimentelle Feature ist die Möglichkeit, in der @astrojs/react-Integration das React-Streaming zu deaktivieren. Das soll beim Verwenden von Libraries hilfreich sein, die mit dem Streaming nicht kompatibel sind, beispielsweise viele CSS-in-JSS-Libraries.

Bei Astro handelt es sich um ein Webframework, das sich insbesondere durch sein Frontend-Architekturmuster, die Islands-Architektur, auszeichnet. Diese rendert den Großteil einer Seite zu schnellem, statischem HTML, während kleinere "Inseln" an JavaScript der Interaktivität und Personalisierung dienen.

Weitere Informationen zum neuen Release sind im Astro-Blog zu finden.

Heise-Konferenz: enterJS 2025

Die enterJS 2025 findet am 7. und 8. Mai in Mannheim statt. Die Konferenz bietet einen umfassenden Blick auf die JavaScript-gestützte Enterprise-Welt. Der Fokus liegt nicht nur auf den Programmiersprachen JavaScript und TypeScript selbst, sondern auch auf Frameworks und Tools, Accessibility, Praxisberichten, UI/UX und Security.

Highlights aus dem Programm:

• Islands Architecture mit Astro
• Navigating the Security Maze: Ein interaktives Abenteuer
• React: Single-Page- oder Fullstack-Anwendung
• Visuelle Tests mit Playwright

Tickets stehen zum Frühbucherpreis im Online-Shop bereit.

(mai)