Tailwind CSS (gaan) gebruiken

Ik ga in dit item uit van het Starter Theme zoals we dat op dit moment (17/02/2022) hebben.

1. Installeer Tailwind CSS (Terminal: ‘npm install tailwindcss’).
2. Maak een bestand tailwind.config.js aan (zie onderstaande code).

tailwind.config.js
module.exports = {
  mode: 'jit', // Just-In-Time Compiler
  purge: ['./src/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3. Open gulpfile.js en zet bovenin:

const tailwindcss = require('tailwindcss');

4. Pas in hetzelfde bestand de styling-watcher aan naar onderstaand:

watcher.on('change', function (fileName) {
    gulp.src(fileName)
    .pipe(sourcemaps.init()) // initialize sourcemaps first
    .pipe(sass()) // compile SCSS to CSS
      .pipe(postcss([
      tailwindcss('./tailwind.config.js'),
      autoprefixer("> 0.5%", "last 4 versions", "ie 11"),
      postcssPresetEnv(),
      postcssInlineSVG()
    ])) // PostCSS plugins
    .pipe(csso({
      restructure: true,
      sourceMap: true,
    }))
    .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
    .pipe(dest('assets/css')) // put final CSS in dist folder

    gulp.src('assets/css/*.css').pipe(browserSync.stream());

    return console.log('compiled: ' + fileName);
  })

5. Voeg onderstaande toe in /dev/styles.scss

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

Nu kan je beginnen met het werken met Tailwind.

---

Na wat meer pielen kom ik tot het volgende. Hierbij is een aparte styles-functie toegevoegd, die ook draait wanneer je een PHP-bestand opnieuw opslaat:

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
const settings = require('./project-settings');

// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
// const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const postcss = require('gulp-postcss');
const postcssPresetEnv = require('postcss-preset-env');
const postcssInlineSVG = require('postcss-inline-svg');
const autoprefixer = require('autoprefixer');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const csso = require('gulp-csso');
const tailwindcss = require('tailwindcss');

const wpPot = require('gulp-wp-pot');

// const browserSync = require('browser-sync').create();

const gulp = require('gulp');

// File paths
const files = {
  scssPath: ['dev/css/*.scss'],
  jsPath: 'dev/js/*.js',
  templateFunctionsPath: 'inc/template-functions.php',
  transPath: 'languages/',
}

// Cachebust
function cacheBustTask() {
  // replaces the theme version in the stylesheets and scripts with a timestamp

  // THIS FUNCTION IS NO LONGER USED AS WE'RE NOW USING PHP FILEMTIME

  var cbString = new Date().getTime();

  return src(files.templateFunctionsPath, {
      base: "./"
    })
    .pipe(replace(/\$theme_version = \d*/g, function (match) {

      // console.log(match);
      // console.log(cbString);
      return '$theme_version = ' + cbString;
    }))
    .pipe(dest('./'));
}


// JS task: uglifies JS files to script.min.js
gulp.task('scripts', function(callback) {
  return src([
    files.jsPath,
    //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
  ])
  // .pipe(concat('./all.js'))
  .pipe(uglify())
  .pipe(rename({suffix: '.min'}))
  .pipe(dest('assets/js')
  );
});

var translate = function() {
  // generate a .pot file

  return gulp.src('./**/*.php')
    .pipe(wpPot( {
        domain: settings.themeDomain,
    } ))
    .pipe(dest(`${files.transPath}/${settings.themeDomain}.pot`));
}

gulp.task('waitForScripts', gulp.series('scripts', function (cb) {
  // browserSync.reload();
  // cacheBustTask();
  cb()
}));

var styles = function (fileName) {
  if (!fileName) {
    fileName = 'dev/css/styles.scss';
  }
    gulp.src(fileName)
    .pipe(sourcemaps.init()) // initialize sourcemaps first
    .pipe(sass()) // compile SCSS to CSS
      .pipe(postcss([
      tailwindcss('./tailwind.config.js'),
      autoprefixer("> 0.5%", "last 4 versions", "ie 11"),
      // postcssPresetEnv(),
      // postcssInlineSVG()
    ])) // PostCSS plugins
    .pipe(csso({
      restructure: true,
      sourceMap: true,
    }))
    .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
    .pipe(dest('assets/css')) // put final CSS in dist folder

    gulp.src('assets/css/*.css');

    return console.log('compiled: ' + fileName);
  }

// all tasks that should be fired by default
exports.default = function () {
  // set up browserSync for automatic reload and streaming
  // browserSync.init({
  //   notify: false,
  //   proxy: settings.urlToPreview,
  //   ghostMode: false,
  //   injectChanges: true,
  //   cors: true,
  //   // snippetOptions: {
  //   //   whitelist: ["/wp-admin/admin-ajax.php"],
  //   //   ignorePaths: "/wp-admin/**"
  //   // },
  // });

  // console.log(settings);

  // starting to watch files in the scss path, if one changes it's being passed on to the scss compiler
  var watcher = watch(files.scssPath);
  watcher.on('change', function (fileName) {
    styles(fileName);
  });

  // starting to watch files in the js path and attaching the 'waitForScripts' function to it
  watch([settings.themeLocation + 'dev/js/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));

  // starting to watch php files and refreshing upon changes
  // also generating new translation file
  // excluding the static.php file because it's being targeted by cacheBustTask

  watch(['./**/*.php', '!./**/static.php'], function (done) {
    // browserSync.reload();
    styles();
    translate();
    done();
  });
};