Installing Tailwind CSS In Our WordPress Theme

Using these documents:

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