TailwindCSS in Processwire

[MateThemes]

Hello everyone.

I am interested in your dev workflow with TailwindCSS. 

How to you use the build process for TailwindCSS in your templates? Are you building your templates first in a separat HTML/CSS setup or to you build your design in a dev installation of processwire. If you build your designs in a dev setup of processwire do you use a gulp setup or something else?

Thank you.

[3fingers]

Hello Mate,
a while back I've made a video on how I usually approach usage of Tailwind with Pw, you can find it here.

Nowaday, with Tailwind v.3.x I've changed my approach slightly, since some additional postcss packages are already included.

Below my updated package.json file, in order to better understand which scripts I invoke:

{
  "devDependencies": {
    "cross-env": "^7.0.2",
    "cssnano": "^4.1.10",
    "laravel-mix": "^6.0.41",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.2",
    "postcss-preset-env": "^7.2.3",
    "tailwindcss": "^3.0.18"
  },
      "dependencies": {
    "concurrently": "^7.0.0",
    "postcss-cli": "^9.1.0"
  },
  "scripts": {
    "start": "npx tailwindcss build -i styles/entry.pcss -o styles/dist/dist.css",
    "watch": "concurrently \"npx postcss styles/entry.pcss -o styles/dist/dist.css --watch\" \" npx mix watch \"",
    "build": "concurrently \"cross-env NODE_ENV=production npx postcss styles/entry.pcss -o styles/dist/dist.css\" \"npx mix --production\""
  }
}

Basically I rely on tailwindcss cli to kickoff the first compilation of my entry point, then I invoke postcss --watch and mix watch (for js). At build time I switch node environment to production (which cssnano the final css) and mix --production to finalize my js (minification, module resolving, etc.).

For completion here is the postcss.config.js:

const cssnano = require('cssnano');

module.exports = () => ({
   plugins: [
      require('postcss-import'),
      require('tailwindcss/nesting'),
      require('tailwindcss'),
      require('autoprefixer'),
      require('postcss-preset-env')({
         features: { 'nesting-rules': false }
      }),
      ...(process.env.NODE_ENV === 'production' ? [cssnano] : [])
   ]
});