Tailwindcss-module: After assembling the project in production mode, my styles disappear (version 1.3.1)

[zabavnikov]

My config:

require('dotenv').config();

module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap'}
    ],
  },

  css: [
    '~/assets/scss/common.scss',
    '~/assets/scss/3rd-party/font-awesome/font-awesome.scss',
  ],

  modules: [
    'nuxt-leaflet',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/toast',
    ['@nuxtjs/router', {keepDefaultRouter: true, fileName: './routes'}],
  ],

  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

  /*
    Modules.
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: `${process.env.API_URL}/api/users/login`, method: 'post', propertyName: 'token' },
          logout: { url: `${process.env.API_URL}/api/users/logout`, method: 'post' },
          user: { url: `${process.env.API_URL}/api/users/me`, method: 'post', propertyName: false },
        },
      }
    }
  },

  toast: {
    duration: 3000,
  },

  build: {
    extractCSS: true,
  },
};

Styles from files do not get into the assembly for some reason
(assets/scss/common.scss, assets/scss/3rd-party/font-awesome/font-awesome.scss)

In dev mode:

In prod mode: (nuxt build && nuxt start)

Sorry for my English 😢

[chuoke]

Same issue.

It caused by purgeCss. Although set enabled to false. I think this rep shouldn't include purgeCss.

My solution is use tailwindcss directly.

[andruu]

Having the same issue

[andruu]

Same issue.

It caused by purgeCss. Although set enabled to false. I think this rep shouldn't include purgeCss.

My solution is use tailwindcss directly.

@chuoke How do you use it directly with Nuxt?

[zabavnikov]

I think I found a solution to the problem. As I understand it, you need to list the list of folders with components that use your styles.

Try adding to your nuxt.config.js.

purgeCSS: {
    paths: ['components/**/*.vue', 'layouts/**/*.vue', 'pages/**/*.vue'],
},

[na86]

Same issue here!

I think this module config was not clear till the beginning.
Despite the good work you guys did, i never managed to properly use purgeCSS with tailwind and nuxt, i had always to set:

purgeCSS { enabled: false }

in my nuxt.config.js to make it work.
The tailwind classes totally disappear after the build.
Any new solution?

_(Anyway, thanks a lot for nuxt and tailwind... 2 of the greatest frameworks ever made) <3_

[chuoke]

@andruu

1. Install it. I like yarn, so

yarn add tailwindcss 

1. Add Tailwind to your CSS, you can follow the doc.
   I like to create a single file for the plugin, this named tailwind.css in the assets/css directory. put content as following

@import 'tailwindcss/base'; 
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

1. Create your Tailwind config file

npx tailwind init

1. Add config to nuxt.config.js

{
  css: ['@/assets/css/tailwind.css'],
  build: {
    postcss: {
      plugins: {
        tailwindcss: path.resolve(__dirname, './tailwind.config.js')
      }
    }
  }
}

[HoraceKeung]

Regarding PurgeCSS, normally we need to whitelist selectors from 3rd party library to stop PurgeCSS from removing them from your CSS. But from its doc https://purgecss.com/whitelisting.html, it seems like there is no way to whitelist an entire specific CSS file by specifying a path to that file.

For me, normally I use this library https://www.npmjs.com/package/purgecss-whitelister like this in nuxt.config.js to whitelist an entire specific CSS file by specifying a path:

import whitelister from 'purgecss-whitelister'

export default {
...
       purgeCSS: {
        whitelist: () => whitelister([
            './assets/css/*.css',
            './node_modules/swiper/css/swiper.min.css'
        ])
    },
...
}

[HoraceKeung]

Would also like to mention that, from my understanding, the way PurgeCSS works is very simple, it simply read through your source code and see if a CSS class is being used in your template.
For example, you have a CSS class like this in style:

.my-button {
  padding: 1rem;
  background-color: blue;
}

But if you never use my-button in your template then PurgeCSS will remove it to keep the final bundle size small. And it will check for the exact string. Therefore the following will not work:
Let say you have two classes:

.bg-red {
  background-color: red;
}
.bg-blue {
  background-color: blue;
}

Then in template

<div :class="`bg-${color}`">...</div>

Or

<div :class="`bg-${isRed ? 'red' : 'blue'}`">...</div>

As shown above, it is constructing the class with Template literals and depending on some state, the class will be different. And because PurgeCSS can't find the exact strings "bg-red" and "bg-blue", both classes will be removed.

Hence you need to do:

<div :class="${isRed ? 'bg-red' : 'bg-blue'}">...</div>

or

// Class Binding: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax
<div :class="{'bg-red': isRed, 'bg-blue': !isRed}">...</div>

This is also mentioned in TailwindCSS' doc https://tailwindcss.com/docs/controlling-file-size/#writing-purgeable-html

[Se7en-IT]

59 I create a pull request for this issue.

[Atinux]

You can also use CSS comments to tell purgeCSS to ignore some blocks:

/* purgecss start ignore */
@import '@snackbar/core/dist/snackbar.css';
/* purgecss end ignore */

[razbakov]

If I have a page index.vue with tailwind classes purgecss works properly.
When I try to move part of this html into component, all classes of that component are purged.
When I try to add a 3d party components, it's css is purged completely.

[Atinux]

@razbakov in what folder your components live?

Also, you need to whitelist 3rd party classe, see https://github.com/Developmint/nuxt-purgecss and https://purgecss.com/configuration.html#options

[razbakov]

I added vue-slider-component, workaround was to create a css with this content:

/* purgecss start ignore */
@import 'vue-slider-component/theme/default.css'
/* purgecss end ignore */

I am wondering if there is a solution to cleanup 3d party classes as well.

[mixn]

I came here to share my approach with purgecss-whitelister, but just saw that @HoraceKeung mentioned it already above. 🙂

Works well for me so far — the purging really cost me a few hours so far (discovering the issue to finding a solution), but I think this is a good fix and easily extended for further files without having to touch regexes for edge-cases, etc.

[tiagomatosweb]

@andruu

1. Install it. I like yarn, so

yarn add tailwindcss 

1. Add Tailwind to your CSS, you can follow the doc.
   I like to create a single file for the plugin, this named tailwind.css in the assets/css directory. put content as following

@import 'tailwindcss/base'; 
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

1. Create your Tailwind config file

npx tailwind init

1. Add config to nuxt.config.js

{
  css: ['@/assets/css/tailwind.css'],
  build: {
    postcss: {
      plugins: {
        tailwindcss: path.resolve(__dirname, './tailwind.config.js')
      }
    }
  }
}

It did the trick for me, but keeping @nuxtjs/tailwindcss module and importing path to the nuxt.config.js file.

tks

[stouch]

Problems, with @andruu answer, begin when you start to use "nuxt-purgecss" module...

[Atinux]

If you want to disable purgeCSS, you can always set in your nuxt.config.js:

purgeCSS: {
  enabled: false
}