WP_ENV tailwind config

sage
1

Hi

Since Tailwind 1.8, CSS purge has been built in. But I am trying to configure it to only purge on production.

Currently process.env.NODE_ENV is showing ‘development’, on both local and live.

I have looked on Google about getting the WP_ENV via javascript but came up short.

Can get the Sage .env to show using dotenv. But is there a way to work with the WP_ENV variable?

2

Current Tailwind 1.8 that is replacing the PurgeCSS in Webpack:

const isProduction = process.env.WP_ENV === 'production';

module.exports = {
...
    purge: {
        enabled: isProduction,
        content: [
            'app/**/*.php',
            'resources/views/**/*.php',
            'resources/assets/scripts/**/*.js',
        ],
        mode: 'layers',
        layers: ['base', 'utilities']
    },
...
3

NODE_ENV is only relevant in the context of Sage when running the build process–it doesn’t have anything to do with your WP_ENV. It will be set to “production” when you run build: production (as opposed to build) unless you’ve modified that command in your package.json.

1 Like
4

Thank you for point that out. Is there any information in the documentation for Bedrock about that? I couldn’t find anything.

5

Not sure why there would be documentation about NODE_ENV in the Bedrock docs. It doesn’t have anything to do w/ Bedrock. It’s just an environment variable that you can set, or not, and it’s only going to be relevant (generally) to JS scripts run from the command line. In Sage 10 it’s set explicitly whereas Sage 9 doesn’t seem to use it directly instead appearing to use Webpack’s env CLI arguments. I don’t know which version of Sage you’re using, or where the code snippet you posted is being used, but you should be able to adapt either approach to work for you.

6

Thank you for the reply. Understood on the NODE_ENV. I am using the below code (swapped WP_ENV to NODE_ENV) in the tailwind.config.js.

From Tailwind 1.8 they have moved PurgeCSS into their configuration file. I needed a way to run the check for production, just as Webpack used too.

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
...
    purge: {
        enabled: isProduction,
        content: [
            'app/**/*.php',
            'resources/views/**/*.php',
            'resources/assets/scripts/**/*.js',
        ],
        mode: 'layers',
        layers: ['base', 'utilities']
    },
...

for anyone coming here for answers in the future, I am only purging ‘base’ and ‘utilities’.

1 Like
7

This topic was automatically closed after 42 days. New replies are no longer allowed.