Jump to content

TailwindCSS in Processwire


Recommended Posts

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.

Link to comment
Share on other sites

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: [
         features: { 'nesting-rules': false }
      ...(process.env.NODE_ENV === 'production' ? [cssnano] : [])
  • Like 1
  • Thanks 1
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...