Even when template paths are specified, tailwindcss still remains unpurged

Question

Even when template paths are specified, tailwindcss still remains unpurged

When running npm run build in production mode, I am encountering an issue where my Tailwind styles are not being purged. Despite filling the purge array in tailwind.config.js with template paths for webpack + postcss setup, I keep seeing the following warning:

warn - Tailwind is not purging unused styles because no template paths have been provided
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.

Here is a snippet of my tailwind.config.js:

 module.exports = {
    purge: ["public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

Additionally, here is my postcss.config.js configuration:

module.exports = {
    plugins: {
        tailwindcss: require("tailwindcss"),
        autoprefixer: require("autoprefixer"),
    },
};

css webpack tailwind-css

Answer 1

Answer №1

After encountering the issue, I was able to resolve it by making adjustments to the postcss.config.js file. It turns out that the plugins should be structured as an array rather than an object, contrary to what some online resources may suggest:

module.exports = { 
   plugins: [
       require("tailwindcss"),
       require("autoprefixer")
   ], 
};

Alternatively, you can experiment with this configuration:

// tailwind.config.js
module.exports = {
  /* ... your actual config */,
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
    ]
  }
}

Answer 2

After encountering the issue, I was able to resolve it by making adjustments to the postcss.config.js file. It turns out that the plugins should be structured as an array rather than an object, contrary to what some online resources may suggest:

module.exports = { 
   plugins: [
       require("tailwindcss"),
       require("autoprefixer")
   ], 
};

Alternatively, you can experiment with this configuration:

// tailwind.config.js
module.exports = {
  /* ... your actual config */,
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
    ]
  }
}

Answer 3

Answer №2

By following these steps, you can optimize your CSS bundle and eliminate a common warning message:

Step 1: Ensure the purge option is added to your tailwind.config.js:


module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './pages/**/*.{js,ts,jsx,tsx}', 
      './modules/**/*.{js,ts,jsx,tsx}', 
      './components/**/*.{js,ts,jsx,tsx}'
    ]
  },
... other 
}

Step 2: Install cssnano as recommended in the Tailwind documentation

https://i.sstatic.net/ssgAu.png

Ensure that your postcss.config.js includes the following:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
};

Answer 4

By following these steps, you can optimize your CSS bundle and eliminate a common warning message:

Step 1: Ensure the purge option is added to your tailwind.config.js:


module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './pages/**/*.{js,ts,jsx,tsx}', 
      './modules/**/*.{js,ts,jsx,tsx}', 
      './components/**/*.{js,ts,jsx,tsx}'
    ]
  },
... other 
}

Step 2: Install cssnano as recommended in the Tailwind documentation

https://i.sstatic.net/ssgAu.png

Ensure that your postcss.config.js includes the following:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
};

Even when template paths are specified, tailwindcss still remains unpurged

Answer №1

Answer №2

Similar questions

Issue with Bootstrap hover and toggle collapse menu functionality in a Ruby on Rails application

Is it possible to use jQuery to dynamically set the line-height of nested objects in CSS?

I am having trouble getting my Wordpress theme to switch to RTL while using the qTranslate plugin

Changing Background Colors of Grid Items in React.js Grid Layout

Maintaining consistent text spacing within a div, regardless of its minimum height: a javascript solution

The dropdown menu button stubbornly remains open and refuses to close

What could be causing the inability of Firefox4 to render the background color of the li element?

Ensure that the horizontal navigation items are equally spaced apart

Enhance the appearance of the Fontawesome icon with the `fa-bars` class by adjusting its width,

What methods can be used to restrict the user from typing at the very end of a scrollable textarea?

Spinning Circle with css hover effect

The issue arises when trying to style a scrollable table in Bootstrap with CSS

How do I apply a CSS class to a label using Zend_Form?

Is there a way to align cards to stack on both the right and left sides of each other?

How to vertically center content within a container-fluid in Bootstrap 4

Mysterious purple squares mysteriously popping up around elements in a WordPress website utilizing CSS Bootstrap 4

Unique Vertical Layout Customization with Bootstrap

When clicking on the HTML div element, it will be appended to the application

Engaging with the CSS content attribute

Guide to utilizing the calendar feature in JavaScript