Configure Tailwind with React-Boilerplate

_custom.tailwind.config.js

// Add this to your tailwind.config.js when you're ready to test if Tailwind is working
module.exports = {
  theme: {
    extend: {
      colors: {
        'yellow-font': '#F7E500',
      },
    },
  },
  variants: {},
  plugins: [],
};

package.json

//This file includes all added/tweaked code to the file.

{
  "scripts":{
    "start": "cross-env NODE_ENV=development npm-run-all -p start:js start:css",
    "start:js": "node server",
    "start:css": "postcss app/css/tailwind.src.css -o app/css/tailwind.css -w",
    "build": "cross-env NODE_ENV=production build:js build:css",
    "bulid:js": "webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
    "build:css": "postcss app/css/tailwind.src.css -o app/css/tailwind.css --env production",
  },
  "dependencies":{
    "@fullhuman/postcss-purgecss": "^2.0.5",
    "autoprefixer": "^9.7.4",
    "npm-run-all": "^4.1.5",
    "postcss": "^7.0.26",
    "postcss-cli": "^7.1.0",
    "tailwindcss": "^1.1.4"
  }
}

postcss.config.js

const tailwindcss = require('tailwindcss');

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './app/**/*.jsx',
    './app/**/*.js',
    './app/**/*.ts',
    './app/index.html',
  ],
  css: ['./app/css/tailwind.css'],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});

module.exports = {
  plugins: [
    tailwindcss('./tailwind.config.js'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],
};

tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

tailwind.src.css

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