Autor: Florian Münch

Tailwind CSS ermöglicht als Utility Framework einen unglaublich effizienten Workflow in der Frontend-Entwicklung. Um Tailwind in deinem WordPress Theme nutzen zu können, reicht es zunächst, dieses via CDN einzubinden. Willst du jedoch über die minimale Funktionalität hinaus, so kommst du um ein lokales Setup nicht herum. Wie du das mit WordPress unter einen Hut bringen kannst, beschreiben wir dir in diesem Beitrag.

WP-Gulp und Gulp-PostCSS

Um Tailwind in den WordPress Theme zu integrieren, musst du zuerst WPGulp installieren. WPGulp ist ein Plugin, das die Integration von gulp.js in WordPress erleichtert. Zusätzlich brauchst du das Gulp-Plugin von PostCSS, um später Tailwind verarbeiten zu können:

npx wpgulp
npm install -D gulp-postcss

Nun hast du ein komplettes Gulp-Setup installiert, das aus SCSS-Dateien kompakte CSS-Dateien generiert. In der wpgulp.config.js musst du jetzt die Pfadvariablen an dein Projekt anpassen. Bestimme, wo deine SCSS-Dateien liegen und wo das CSS generiert wird. Da dein Projekt jetzt mit SCSS arbeitet, solltest du jetzt deine Stylesheets anpassen.

Installation von Tailwind CSS

Jetzt sind wir bereit, Tailwind in unser Theme zu integrieren:

npm install tailwindcss

Füge dann Tailwind deiner primären SCSS-Datei hinzu:

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

Wenn du Tailwind individuell anpassen und erweitern möchtest, kannst du eine Konfigurationsdatei generieren lassen:

npx tailwind init

In der dadurch erstellten tailwind.config.js kannst du Tailwind jetzt nach Belieben anpassen. Mehr dazu auf  https://tailwindcss.com/docs/configuration.

Integration von Tailwind CSS in gulp

Jetzt haben wir alles, was wir brauchen, um Tailwind in Gulp zu konfigurieren. Dazu gehen wir in die gulpfile.babel.js. Hier fügen wir zuerst PostCSS und Tailwind den CSS-Plugins hinzu:

// CSS related plugins
// ...
const postcss = require( ‘gulp-postcss’ );
const tailwindcss = require( ‘tailwindcss’ );
// ...

Die beiden Plugins sind jetzt in unserer Gulp-Datei als Konstanten importiert. Nun wollen wir, dass Gulp diese auch verwendet. Die Gulp-Tasks styles und stylesRTL generieren die finalen CSS-Dateien und RTL-Stylesheets (Right To Left). Hier fügen wir PostCSS und Tailwind ein:

gulp.task( ‘styles’. () => {
  return gulp
    .src( config.stlyeSRC, { allowEmpty: true })
    // ...
    .pipe( postcss([
      tailwindcss( ‘./path/to/your/tailwind.config.js’ ),
      require( ‘autoprefixer’ )
    ]) )
    // ...
});
// ...
gulp.task( ‘stylesRTL’. () => {
  return gulp
    .src( config.stlyeSRC, { allowEmpty: true })
    // ...
    .pipe( postcss([
      tailwindcss( ‘./path/to/your/tailwind.config.js’ ),
      require( ‘autoprefixer’ )
    ]) )
    // ...
});
// ...

Ist das erledigt, können wir testen, ob unser Setup funktioniert. Dazu kannst du einfach in einer deiner PHP-Dateien einem HTML-Element eine beliebige Tailwind-Klasse wie bg-red-500 hinzufügen.

Führe nun npm start aus. Wurden deine Styles erfolgreich generiert, kannst du auf deiner Seite schauen, ob die Tailwind-Styles angezeigt werden. Funktioniert? Glückwunsch, du hast erfolgreich Tailwind CSS deinem WordPress-Theme hinzugefügt! Jetzt kannst du damit anfangen, deine tailwind.config.js individuell anzupassen.

Links:

• WPGulp: https://github.com/ahmadawais/WPGulp
• gulp.js: https://gulpjs.com/
• Tailwind CSS: https://tailwindcss.com/