Search code examples
wordpresswebpackwordpress-themingtailwind-csslaravel-mix

tailwind.config.js purge option doesn't recognise PHP files and causes infinite recompiling


I'm building out a custom WordPress theme with Tailwind and compiling assets with Laravel Mix 6.

In my tailwind.config.js file I have the following purge configuration:

  purge: {
    enabled: true,
    content: [
      './assets/**/*.{.js|.scss}',
      // './*.php',
      // './*/*.php',
      // './*/*/*.php',
    ],
    safelist: [
      // list any Tailwind classes which should never be purged, for example classes added via WordPress which are stored in the database
      // 'classname',
    ],
  },

Now, my first line works absolutely perfectly. It looks for any .scss or .js files inside my assets folder or subfolders and compiles on change. However if I uncomment any of the .php lines Laravel Mix constantly recompiles in the terminal even when I'm not making changes - it's completely endless.

enter image description here

I've narrowed the issue down to these lines, if they're not added it works fine, but I need them added so TailWind knows what classes are being used.

My webpack.mix.js for reference also:

const mix = require("laravel-mix");

mix.js("assets/js/main.js", "build/scripts.js")
    .sass("assets/scss/main.scss", "build")
    .sourceMaps()
    .browserSync("wordpressthemedev.local")
    .options({
        processCssUrls: false,
        postCss: [
            require("postcss-import"),
            require("tailwindcss"),
            require("postcss-nested"),
            require("autoprefixer"),
        ],
    });

Additionally, if I do this:

  purge: {
    enabled: true,
    content: [
      './assets/**/*.{.js|.scss}',
      './parts/**/*.php',
      './functions/**/*.php',
      './404.php',
      './footer.php',
      './functions.php',
      './header.php',
      './index.php',
      './page.php',
      './search.php',
      './single.php',
      // './*/*/*.php',
    ],
    safelist: [
      // list any Tailwind classes which should never be purged, for example classes added via WordPress which are stored in the database
      // 'classname',
    ],
  },

Mix doesn't compile forever and does run fine, but I would rather avoid having to declare every PHP file at root level if possible


Solution

  • So, annoyingly there doesn't seem to be an easy way around this. As Myself and Amar highlighted, you can get around this if you explicitly set the names of the files within the purge array - but this isn't the most optimal solution especially if your implementation has a lot of files to check.

    I did some extra digging, and if you're trying to use this with WordPress, I could really recommend starting with either Roots Sage or MountainBreeze on a Roots Bedrock installation.

    I personally find Sage a little too bloated out with unnecessary functions for most of the sites I build, so I'm running with Bedrock & MountainBreeze - A really nice combo so far!