create-react-app mit Tailwind CSS

TailwindCSS ist eine CSS-Library, mit der man durch ein einfaches Hinzufügen von Klassen seine Komponenten stylen kann. Anders als bei z. B. Bootstrap verfolgt Tailwind die Philosophie eher einfache Bausteine anzubieten, anstatt ganze UI-Elemente wie Buttons.

TailwindCSS bietet aufeinander abgestimmte Utility-Classes (CSS-Klassen, die sinnvoll aufeinander aufbauen), die wir nach eigenen Wünschen und den UI-Anforderungen komponieren können. Im Vergleich zu händisch geschriebenem CSS, handelt es sich um einen etwas komfortableren Baukasten, der uns auch z. B. beim Bau von repsonsive Designs unterstützt. Wenn CSS Handwerksarbeit ist, dann ist TailwindCSS wie ein Spielen mit Lego. Anders als beim tatsächlichen Lego, können wir die Bausteine aber noch unseren Wünschen gemäß anpassen.

In diesem Post soll es um die initiale Einrichtung von Tailwind CSS (und PurgeCSS) bei create-react-app gehen.

Vorüberlegungen

create-react-app (cra) ist ein - insbesondere aus DX-Sicht (developer experience) - guter Startpunkt für viele React-Projekte, weil uns das Tool die Konfiguration von Babel, Webpack und einigen anderen Sachen abnimmt. Zusätzlich verringert es optisch Komplexität, in dem es Konfigurationen, die einen zunächst nicht zu interessieren brauchen versteckt. Dies erlaubt es uns Devs uns ganz auf den selbst zu schreibenden Code zu konzentrieren. Außerdem können die Abhängigkeiten einer mit cra kreierten Applikation mit einem Update einer einzigen Abhängigkeit (nämlich react-scripts) aktuell gehalten werden.

Diese tolle dx wollen wir gerne erhalten. Wenn wir TailwindCSS integrieren, dann soll dies möglichst "minimalinvasiv" geschehen. Man kann mit cra erstellte Projekte auch "ejecten", d. h. die internen Konfigurationsdateien sichtbar machen, man verliert dann aber den Hauptvorzug von cra: die verringerte optische Komplexität und man muss nun auch sämtliche Abhängigkeiten, die eine React-App ausmachen (Webpack, Babel, ESlint, …) selbst verwalten und ggf. aktualisieren.

Tailwind CSS ist keine allzu kleine Bibliothek. Noch im komprimierten Zustand ist das gzip 58,8 kb groß. Es ist sehr unwahrscheinlich, dass wir jede Tailwind-Klasse brauchen werden. Es wäre daher wünschenswert, wenn wir überflüssiges CSS vor der Auslieferung entfernen würden. Tailwind CSS selbst empfiehlt für diese Sorgen PurgeCSS, welches wir ebenfalls mit cra verwenden wollen.

Installation der Abhängigkeiten

Für unsere Anforderungen genügen purgecss und tailwindcss. Da wir beide nur in der Entwicklung nicht aber im laufenden Betrieb brauchen, installieren wir die Module als Dev-Dependencies.

npm i -D tailwindcss purgecss

Einrichtung von tailwindcss

Damit wir Tailwind verwenden können, müssen wir eine CSS-Datei haben, die uns über die @tailwind-Direktiven die eigentlichen CSS-Klassen in unsere App einbindet.

Wir erstellen dazu im src-Verzeichnis eine Datei tailwind.src.css mit folgendem Inhalt:

@tailwind base;
@tailwind components;
@tailwind utilities;

Diese werden wir über das tailwind cli in tatsächliches CSS umwandeln.

Wir binden die später erstellte Datei mit den tatsächlichen CSS-Regeln in unsre index.js ein:

import './tailwind.css';

Wir erstellen außerdem noch eine Tailwind-Konfigurationsdatei, die wir in diesem Artikel zwar nicht weiter anpassen werden, aber falls wir zukünftig Farben, Schriften, usw. ändern wollen, dann haben wir hiermit schon einmal die Grundlage geschaffen.

Wir rufen im Wurzelverzeichnis unserer App folgenden Befehl im Terminal auf:

npx tailwindcss init

Anschließend finden wir im Wurzelverzeichnis eine Datei tailwind.config.js vor, die folgenden Inhalt hat:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

Einrichtung purgecss

Für purgecss brauchen wir auch eine Konfigurationsdatei. Diese trägt den Namen purgecss.config.js und muss bei purgecss selbst erstellt werden. Sie sollte folgenden Inhalt haben:

module.exports = { content: ['src/**.js'], css: ['src/tailwind.css'] };

Für purgecss geben wir als Konfiguration an, welche Inhalte (content) bezüglich der Nutzung von Klassen aus der tailwind.css (css) überprüft werden sollen. Alle anderen CSS-Klassen aus der tailwind.css werden anschließend entfernt.

Einrichtung npm scripts

In der package.json passen wir den Punkt scripts folgendermaßen an:

"scripts": {
    "start": "react-scripts start",
    "build": "npm run css && react-scripts build",
    "css": "npm run tailwind && npm run purgecss",
    "purgecss": "purgecss -c purgecss.config.js -o src",
    "tailwind": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css"
  },

• start - das ist lediglich das übliche cra start-Skript
• build - hier führen wir das css Skript aus (siehe unten) und anschließt das cra-Build-Skript
• css - das führt das tailwind und anschließend (&&) das purgecss-Skript aus
• purgecss - dies führt das purgecss cli mit unserer Konfig im src-Ordner aus
• tailwind - dieses Skript führt das tailwind cli mit unserer Konfiguration aus (wir müssen dies einmal ausführen, bevor wir mit dem eigentlichen Entwickeln anfangen wollen)

Tailwind CSS ausprobieren

Dass Tailwind CSS jetzt funktioniert, lässt sich ganz einfach zeigen. Starten wir zunächst den Dev-Server von cra:

npm run start

Ändern wir nun z. B. die Größe und die Farbe des Texts unter dem sich drehenden React-Logo:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p className="text-red-600 text-6xl">
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Wie man im p-Element sehen kann, haben wir nichts weiter getan, als zwei CSS-Klassen hinzuzufügen:

PurgeCSS ausprobieren

Am einfachsten lässt sich zeigen wie viel man an unnötigem CSS einspart, wenn man die Größen der ausgelieferten CSS-Dateien vergleicht. Wir fügen daher ein weiteres Skript unserer package.json hinzu:

"build:nopurge": "npm run tailwind && react-scripts build",

Hier das Ergebnis, wenn wir die nur ganz leicht mit Tailwind angepasste cra-App ohne purgeCSS bauen:

Und hier die Version mit purgeCSS

Hier noch zum Vergleich ein Vanilla-Build ohne tailwind und ohne purgecss:

360kb vs. 3kb ist schon ein gewaltiger Unterschied (Klar: Je mehr wir tailwind tatsächlich verwenden, desto mehr CSS wird später auch ausgeliefert werden).

Fazit

Das Einbinden von Tailwind und PurgeCSS ist dankenswerterweise nicht sehr schwer und erlaubt das Entwerfen von Apps mithilfe des sehr beliebten CSS-Utility-First-Frameworks, ohne dass wir unsere App ejecten müssen.

Referenzen

• Create-React-App
  • Github-Repo
  • Doku
• PurgeCSS
  • Doku
• Tailwind CSS
  • Doku