Category: Sass

Using these documents:

• https://tailwindcss.com/docs/using-with-preprocessors
• https://tailwindcss.com/docs/installation/using-postcss

Step 1: Navigate to the child theme directory then run

#The command below is from tailwind docs but it gives an error message:

npm install -D tailwindcss

#Can use this command instead and it runs correctly:

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

This gives us an error message of:

To Fix This we can either open up package.json and change the auto prefixer version ro 10.0.2 or we can run update our command to run:

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

#If you want to just change auto prefixer version and then re run the npm install you can update this line:

"autoprefixer": "^10.0.2",

Step 2: Creating tailwind config file, run:

npx tailwindcss init

This creates the file tailwind.config.js. We need to add this code to that file:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

#old can remove later if the above works.... We need to tell this file where to look for reference to tailwind divs that we have created so we add


content: [
    "./templates/**/*.php",
  "./partials/**/*.php",
],

Now we have to create the file postcss.config.js -> just copy the tailwindconfig.js file and rename it then replace the contents with:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Now we need to create a new tailwind.scss file -> import this file from frontend.scss -> turn on yarn watch -> then finally add the tailwind imports to this file and have it compile. So to do this

• copy frontend.scss -> rename it to tailwindcss.scss
• delete the contents of the file
• open up frontend.scss and add @import tailwindscss to the first line
• turn on yarn watch
• add in the tailwind imports below to tailwindcss.scss file and it will automatically run through the compiler

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

Now we are going to add in support for nesting in Sass/Tailwind. To do this we will run:

yarn add -D postcss-nested

That creates a file called postcss.config.js and we will add the following lines to that file

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

Now we will run yarn add gulp and then navigate to our child theme directory and run yarn watch

This post is mainly a helpful reminder reference to my future self so please excuse the lack of polish on this article.

Outline:

• Create a package.json file with all the needed dependencies to get Sass + Browser sync working
• Install all dependencies using NPM
• Activate Gulp Watch + Browser-sync to enjoy lighting fast developing

Creating Json File:

Initially its best to create this file from the command line, so open terminal in php storm, navigate to the sites theme file and run the npm commands, which will generate this file:

{
  "name": "SassAutomation",
  "version": "0.0.1",
  "description": "Quick & dirty SASS automation for WP Theme",
  "author": "Sam",
  "devDependencies": {
    "gulp": "^3.8.11",
    "browser-sync": "^2.26.7",
    "gulp-ruby-sass": "^1.0.5",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-watch": "^5.0.1",
    "node-sass": "^4.12.0",
  }
}

Setup Gulp File:

We want to create a gulpfile that will watch all of our Sass files for changes. When a change is detected we want this file to re-compile the new sass into our sites main style.css file located in the root directory of the them. The Gulp file below will do all of these operations:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch');
    browserSync = require('browser-sync');
    reload      = browserSync.reload;

gulp.task('sass', function(){
    gulp.src('./scss/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(''))
        .pipe(reload({stream:true}));
});

// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
    //watch files
    var files = [
        './scss/*.scss',
    ];

    //initialize browsersync
    browserSync.init(files, {
        //browsersync with a php server
        proxy: "http://localhost/folder-name",
        notify: true
    });
});

gulp.task('default', ['sass', 'browser-sync'], function() {
    gulp.watch('./scss/**/*.scss', ['sass']);
});

Notes about the code above:

• Line 4 calls in browser sync which will open a new window when you run the gulp command
• Line 5 and line 10 forces the auto refresh of the browser window anytime a change is made, which is super handy as it removes the need to constantly manually refresh the local environment to see our chagnes
• The line that starts with “proxy” identifies where the site should display. In this instance I’m using WAMP which generates a URL of localhost. The “folder-name” at the end of the line can be replaced with whatever folder the site lives in. So IE if the site was in WAMP – > WWW -> altec the proxy line would be: http://localhost/altec

Error Message:

gulp internal/modules/cjs/loader.js:638 cannont find module 'gulp-ruby-sass'

Fix:

npm update 
npm install gulp-sass --save-dev

Error Message:

npm WARN gulp-jshint@2.1.0 requires a peer of jshint@2.x but hone is installed

Fix:

npm install jshint

Error Message:

Local gulp not found in C:\\filepath

Fix:

npm install gulp