After assembling the project in production mode, my styles disappear (version 1.3.1)

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 😢

[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

[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')
      }
    }
  }
}