Can not config Tailwind in NuxtJS

Question

i use "@nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App. After install, it created a tailwind.config.js file. And then, i added a little code as you could see below:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  },
  options: {
    important: true,
  },
};

I want all the Tailwind's class have important, but it weren't.

inside the tailwin's class

What i did wrong?

Answer 1

Most probably you are running NODE_ENV=production so its purging unused classes

Setting purge.enabled=false will do what you want. I don't recommend setting it false. If a class is used purge won't remove the class. As you are not using most of the classes in HTML they are getting removed.

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  purge: {
    enabled: false, // DONT DO THIS IN PRODUCTION
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  },
  options: {
    important: true,
  },
};

Answer 2

If I look at the documentation the important key should be at the root of export :

// tailwind.config.js
module.exports = {
  important: true,
}

instead of

// tailwind.config.js
module.exports = {
  options: {
    important: true,
  }
}