Here’s one more article on TailwindCSS. This time, I want to share my relatively easy setup for a fast and easy workplace.

Install and set up TailwindCSS CLI

We’re going to use a node.js stack and will use npm scripts for development. Hence, we start with adding our dependency: npm i --save-dev tailwindcss

Now we need a command that processes our input files into a minified and optimised regular CSS file. This is done with an npm script which you define inside your package.json:

"scripts": {
    "watch": "npx tailwindcss -i css/app.css -o css/dist/app.css --watch"
},

Now comes the biggest task which is adapting Tailwind to your needs. This is best done through your own tailwind.config.js file which is placed in your project’s root folder (alongside where the package.json is found). Here’s how I usually configure it. Note the php file endings I include so that Tailwind scans my PHP templates that contain the HTML classes. This allows Tailwind to strip all the code that’s not actually being used from the CSS output.

const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    './site/templates/**/*.{php,js}',
    './assets/**/*.js'
  ],
  corePlugins: {
    clear: false,
    float: false,
    overscrollBehavior: false,
    isolation: false,
    boxDecorationBreak: false,
    mixBlendMode: false,
    backgroundBlendMode: false,
    backdropFilter: false,
    backdropBlur: false,
    backdropBrightness: false,
    backdropContrast: false,
    backdropGrayscale: false,
    backdropHueRotate: false,
    backdropInvert: false,
    backdropOpacity: false,
    backdropSaturate: false,
    backdropSepia: false,
    brightness: false,
    contrast: false,
    grayscale: false,
    hueRotate: false,
    invert: false,
    saturate: false,
    sepia: false,
    borderCollapse: false,
    animation: false,
    transitionDelay: false,
    skew: false,
    fontVariantNumeric: false,
    fontSmoothing: false
  },
  theme: {
    fontWeight: {
      light: 300,
      normal: 400,
      semibold: 600,
      bold: 700
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: 'white',
      gray: colors.slate,
      red: colors.red,
      blue: colors.sky,
      yellow: colors.amber,
    },
    fontFamily: {
      sans: ['Source Sans Pro', 'sans-serif']
    },
    extend: {},
  },
  variants: {
    motionSafe: false,
    motionReduce: false,
    odd: false,
    even: false,
    extend: {},
  },
  plugins: [],
}

Of course you should adapt all that to the needs of your current project but it gives some insights on what’s possible and the probably most common changes to the default configuration.

Run it

You can now use npm run watch as command in your command line terminal and have a super fast compiling CSS output, optimised for production.

This setup gives me a 18kb CSS file output instead of a whole 4MB when using Tailwind’s complete library without optimizations. Compiling the CSS after a change takes an average of 45ms on an M1 MacBook Air — fast enough.