Using Vite to build does not purge unused styles

[MartinPeverelli]

Describe the problem:

Using npm run build on a Vite project does not purge unused styles.

Link to a minimal reproduction:

Reproduction repository: https://github.com/MartinPeverelli/vite-tailwind-purge npm install npm run build

Result:

[write] assets/index.cc4e5260.css 3101.47kb, brotli: 73.67k

Manual steps:

( as per vitejs.dev )
npm init @vitejs/app vite-tailwind-purge --template vue
cd vite-tailwind-purge
npm install
( as per tailwindcss.com )
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npx tailwindcss init -p
( https://tailwindcss.com/docs/guides/vue-3-vite#configure-tailwind-to-remove-unused-styles-in-production )
( https://tailwindcss.com/docs/guides/vue-3-vite#include-tailwind-in-your-css )
npm run build

Theory, if I may:

Vite no longer uses process.env.NODE_ENV to signal it is running in production, it uses import.meta.env.MODE (Vite docs) This, then does not trigger the automatic purge in src/lib/purgeUnusedStyles.js

  const purgeEnabled = _.get(
    config,
    'purge.enabled',
    config.purge !== false && config.purge !== undefined && process.env.NODE_ENV === 'production'
  )

[adamwathan]

Yep nothing we can do to change this easily/automatically I'm afraid, that's why we have configuration options for enabling Purge manually:

https://tailwindcss.com/docs/optimizing-for-production#enabling-manually

You can also just run NODE_ENV=production npm run build from the command line 👍🏻

[MartinPeverelli]

Thanks! Works like a charm!

Added this to my package.json

  "scripts": {
    "dev": "vite",
    "build": "NODE_ENV=production vite build"
  },

[michTheBrandofficial]

Hello.

I also have the same issue and I tried adding that to my package.json but I end up getting 'NODE_ENV' is not recognized as an internal or external command.

[Darlley]

Olá.

Eu também tenho o mesmo problema e tentei adicionar isso ao meu package.json, mas acabo ficando 'NODE_ENV' não é reconhecido como um comando interno ou externo.

Aqui também.