Erste Schritte mit Tailwind CSS und Laravel

Vor ein paar Jahren stieß ich auf Adam Wathan und seinen Laravel Kurs Test Driven Development. Als ich dann das erste Mal davon gehört habe, dass Adam ein CSS Framework entwickelt, war ich schon ziemlich überrascht. Nach dem ersten Blick war mir allerdings klar, dass der Utility-First Ansatz von Tailwind CSS genau dem entspricht, wie ein Entwickler arbeiten möchte.

Grund genug für mich, Tailwind CSS und Laravel in meinen Projekten einzusetzen. Aktuell wird mit Laravel immer noch Bootstrap als CSS Framework „mitgeliefert“.

Update 11.01.2021

Mittlerweile gehört TailwindCSS in Verbindung mit Laravel Breeze zur Grundausstattung einer Laravel Anwendung. Daher dieses Tutorial nur für Laravel 7 und kleiner.

Doch mit ein paar Handgriffen lässt sich Tailwind auch gut in Laravel einbinden und bildet dann ein solides Gespann.

Tailwind bedeutet übrigens Rückenwind. Und genau das trifft exakt zu.

Laravel Installation

Wir beginnen mit einer frischen Laravel Installation. Grundsätzlich kann Tailwind CSS auch in existierende Laravel Projekte integriert werden, aber das ist natürlich aufwändiger und sehr individuell.

laravel new laratailwind && cd laratailwind

Tailwind mit npm installieren

Wichtig ist hier, dass du es tailwindcss und nicht tailwind verwendest.

npm install tailwindcss

Als nächstes holst du dir das Laravel Tailwind UI Preset

composer require laravel-frontend-presets/tailwindcss --dev

Laravel UI initialisieren

Wie bei Laravel seit Version 6 üblich kann jetzt das UI entweder mit oder ohne Authentifizierung initialisiert werden. Ich nehme das so gut wie immer mit. Es ist wesentlich aufwändiger die Authentifizierung später einzubauen als sie auszublenden, wenn ich

php artisan ui tailwindcss --auth

Laravel Assets generieren

Jetzt wird es Zeit aus den vorhanden Assets die fertigen CSS und JS Dateien zu generieren. Ich nehme immer watch und nicht dev. Da ich sowieso die Styles öfter anpassen muss, bin ich für den Watcher sehr dankbar.

npm install && npm run watch

Unterschiede zur Bootstrap UI Version

Die /resources/views/layouts/app.blade.php und alle Views unter /resources/views/auth sind entsprechend der CSS Klassen von Tailwind CSS angepasst.

In /resources/ gibt es einen css Ordner. In Laravel Installation mit Bootstrap gibt es hier einen sass Ordner.

Kannst du Sass oder also jetzt nicht nutzen?

Doch, aber dazu ist noch etwas Konfigurationsarbeit notwendig.

Tailwind CSS und Laravel mit Less

In der /webpack.mix.js musst du

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css')
   .tailwind('./tailwind.config.js');

durch folgenden Code eretzen

const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
    .less("resources/less/app.less", "public/css")
    .options({
        postCss: [tailwindcss("./tailwind.config.js")]
    });

Anschließend noch npm run watch unterbrechen mit CMD-C oder Strg-C wieder aufrufen.

Tailwind CSS und Laravel mit Sass

In der /webpack.mix.js musst du

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css')
   .tailwind('./tailwind.config.js');

durch folgenden Code ersetzen

const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")]
    });

Anschließend noch npm run watch unterbrechen mit CMD-C oder Strg-C wieder aufrufen.

Ab sofort kannst du also Tailwind CSS mit Laravel nutzen. Es gibt kaum ein Gespann im PHP / CSS Bereich der so gut zusammen passt. Das wird deine Produktivität mit Sicherheit steigern.

Wenn du noch nichts mit Laravel gemacht hast, dann kannst du dir auch mein Laravel Anfänger Tutorial anschauen.

Eine Bitte: Lass einen Kommentar da. Anregungen, Kritik, aber auch Lob werden gerne gesehen 🙂