Struggling to set up Tailwind in NuxtJS configuration

Question

Struggling to set up Tailwind in NuxtJS configuration

Using the "@nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App has been quite helpful. Upon installation, it generated a tailwind.config.js file. I made some modifications to the code 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,
      },
    };

Despite setting all Tailwind classes as important in the configuration, they did not behave as expected.

View an example of one such class

Where did I go wrong?

vue.js nuxt.js tailwind-css

Answer 1

Answer №1

It appears that your environment is set to NODE_ENV=production, which is why unused classes are being purged.

If you want to prevent this behavior, you can set purge.enabled=false. However, it's not recommended as purge helps remove unused classes from the HTML.

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

Answer 2

It appears that your environment is set to NODE_ENV=production, which is why unused classes are being purged.

If you want to prevent this behavior, you can set purge.enabled=false. However, it's not recommended as purge helps remove unused classes from the HTML.

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

Answer 3

Answer №2

According to the documentation, the crucial key should be placed at the top level of the export object:

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

Rather than being nested within an 'options' key like this:

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

Answer 4

According to the documentation, the crucial key should be placed at the top level of the export object:

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

Rather than being nested within an 'options' key like this:

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

Answer 5

Answer №3

It became clear to me what was causing the issue.

Turns out, the culprit was related to PostCSS

Additionally, in previous versions, the important setting was within the options, but now it is located at the root level

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

Answer 6

It became clear to me what was causing the issue.

Turns out, the culprit was related to PostCSS

Additionally, in previous versions, the important setting was within the options, but now it is located at the root level

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

Struggling to set up Tailwind in NuxtJS configuration

Answer №1

Answer №2

Answer №3

Similar questions

Add an item with a combination of different data types (such as objects and arrays) to a Mongo database, but encountering

I keep encountering the same issue every time I try to execute the npm run watch command. Does anyone have any suggestions on how to fix this?

The event in Vue.js does not trigger for items that have been filtered out of the list

The 'default' export is not found in the 'tailwind.config.js' file

Leveraging Vue.js's computed properties to access and manipulate elements within an

Utilize separate v-for directives in Vue 3 for a single component

The "open" property was called upon during the rendering process but is not present on the current instance

Calculating the sum in a VueJS pivot table

What is the best method for saving Vue's `prototype.$something` in a distinct file?

Mastering VueTify: Customizing CSS like a Pro

The background image on Nuxt.js is not adapting to different screen sizes

When IntelliJ starts Spring boot, resources folder assets are not served

Begin fetching data asynchronously in Vue Nuxt to initialize data

Vue3's transition behavior sets it apart from Vue2. It introduces new functionalities when managing templates outside of the transition

"Exploring the world of Vue.js and videojs: refreshing the video

Utilizing Vue.js 2.x to send a REST API request with a collection of objects

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Develop a straightforward static webpage and set it up by installing and launching it using NPM

What is the best way to populate a Vue form with pre-existing data?

organize column and row indexes in vuejs by descending order