CODEWITHSUNDEEP
vue.jstailwind-cssvite
Syed
Syed

Reputation: 16503

How to stop Tailwind CSS from purging the classes in local development environment?

I am vite.js build tool, vue.js and tailwindcss: ^2.1.4

Everything was working normal before but now I am not sure what I did, purge is not working as expected. Tailwind class started purging even in my development environment. It was suppose to purge only when I build project for production.

Say that I applied mb-10 pt-10 to div, to see this in effect, I need to do one of two things:

  1. Restart vite.js, Or
  2. In css file define: .cust-class { @apply mb-10 pt-10 } then mb-10 pt-10 classes will work (together or individually)

Here is my tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000',
      white: '#fff',
    },
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
};

I never had issue with same configuration in other projects.

Thanks for your help.

Upvotes: 4

Views: 5270

Answers (1)

Syed
Syed

Reputation: 16503

The problem was due to .env file, which I added recently:

There I have defined

NODE_ENV=production

I changed it to

NODE_ENV=development

things are working now.

Upvotes: 3

Related Questions