Elixir Phoenix & Tailwind JIT

Die Struktur eines Projektes besteht aus unterschiedlichsten Komponenten. Da wir ständig neue Erkenntnisse sammeln, verändert sich die Projektstruktur im Laufe der Zeit. Dies können kleinere Änderungen sein, die beispielsweise die DX (Developer Experience) optimieren, manchmal sind es aber auch größere Anpassungen.

Einer unserer aktuellen “Technologie-Stacks” ist der sogenannte PETAL-Stack und besteht aus folgenden Komponenten:

• Phoenix
• Elixir
• Tailwind CSS
• Alpine.js
• LiveView

Die neuste Änderung an diesem Stack ist der Tailwind JIT (Just-In-Time) Compiler.

Tailwind JIT

Wie haben wir Tailwind CSS bisher verwendet?

In einer tailwind.config.js können Anpassungen vorgenommen werden, die von der Standard-Konfiguration abweichen. Hier ist ein Ausschnitt aus der tailwind.config.js von unserer Website sourceboat.com zu sehen:

// tailwind.config.js

module.exports = {
  darkMode: false,
  theme: {
    colors: {
      black: '#000000',
      white: '#ffffff',
      graphite: '#2d2e32',
      icegrey: '#f8f8f8',
      concrete: '#b8bcbf',
      azure: '#055fdc',
      blueeye: '#7684aa',
      brick: '#e15639',
      lavender: '#dcd7f5',
      sun: '#ffc300',
      sky: '#d7f0ff'
    },
    fontFamily: {
      'sans': ['IBM Plex Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
      'serif': ['IBM Plex Serif', 'Georgia', 'Times', 'serif'],
      'mono': ['IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier', 'monospace']
    }
  }
}

Diese Konfiguration wird während der Entwicklung dazu benutzt, eine CSS-Datei im Voraus zu erzeugen. Je nach Konfiguration kann diese CSS-Datei sehr groß werden, weil alle möglichen Style-Kombinationen enthalten sind. Sehr “teure” Optionen in Bezug auf die Dateigröße sind u.A. weitere Breakpoints oder der Dark-Mode. Die Aktivierung des Dark-Modes sorgt beispielsweise dafür, dass es Styles nicht nur in einer, sondern in einer Dark- und Light-Variante gibt.

Eine CSS-Datei kann so schnell eine Größe von 10-20 MB erreichen und sorgt für die folgenden Probleme:

• Browser kommen an ihre Grenzen.
• Die Website kann nicht mehr dargestellt werden.
• Developer-Tools der Browser laufen nicht mehr flüssig.
• Es dauert lange, die CSS-Dateien zu erstellen.

Dies ist übrigens nur ein Problem während der Entwicklung. In den Produktiv-Umgebungen werden alle nicht benötigten Styles mit PurgeCSS entfernt, um die CSS-Datei klein zu halten.

Die Lösung all unserer Probleme

Seit Tailwind CSS 2.1 gibt es einen JIT Compiler, der nicht mehr alle gegebenenfalls benötigten Styles im Voraus erzeugt – sobald sich etwas am Quellcode ändert, werden ausschließlich die benötigten Styles erzeugt.

Um den JIT Compiler verwenden zu können muss es einen Prozess geben, der auf diese Dateiänderungen reagiert. Bei Elixir Phoenix können für genau diesen Zweck in der Entwicklungsumgebung watchers konfiguriert werden:

# config/dev.exs

config :sourceboat, SourceboatWeb.Endpoint,
  watchers: [
    yarn: ["watch", cd: Path.expand("../assets", __DIR__)]
  ]

Bei Änderungen wird also yarn watch ausgeführt. Dies ist ein in der package.json definiertes Script:

{
  "scripts": {
-    "dev": "mix",
+    "dev": "TAILWIND_MODE=build NODE_ENV=development mix",
-    "watch": "mix watch",
+    "watch": "TAILWIND_MODE=watch NODE_ENV=development mix watch",
-    "prod": "mix --production"
+    "prod": "TAILWIND_MODE=build NODE_ENV=production mix --production"
  }
}

Die Variablen TAILWIND_MODE und NODE_ENV werden nur für den JIT Mode benötigt.

Zu guter Letzt muss nur noch der JIT Mode in der tailwind.config.js aktiviert werden:

// tailwind.config.js

module.exports = {
+  mode: 'jit',
  darkMode: false,
  theme: {
    colors: {
      black: '#000000',
      white: '#ffffff',
      graphite: '#2d2e32',
      icegrey: '#f8f8f8',
      concrete: '#b8bcbf',
      azure: '#055fdc',
      blueeye: '#7684aa',
      brick: '#e15639',
      lavender: '#dcd7f5',
      sun: '#ffc300',
      sky: '#d7f0ff'
    },
      ,
    fontFamily: {
      'sans': ['IBM Plex Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
      'serif': ['IBM Plex Serif', 'Georgia', 'Times', 'serif'],
      'mono': ['IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier', 'monospace']
    }
  }
}

Durch die Verwendung des JIT Compilers haben wir die Größe der CSS-Datei unserer eigenen Website von 1.9 MB auf 19.6 KB reduziert (natürlich nur während der Entwicklung). :-) Wir sind überzeugt von Tailwinds JIT-Feature und werden es in bestehende sowie neue Projekte einführen.