Usage of Tailwind with nuxt lead to weird @apply issue

[beneccli]

Hello,

I'm trying to use tailwind with nuxt and get this error:

@apply cannot be used with .group because .group either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .group exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

This only happen with .group or variant classes, all other ones (.ml-6, .bg-green-500, etc.) are working well with @apply.

I don't really understand why only a few classes work, not all?

If that helps, you'll find my configuration below.

Any help to understand the issue would be much appreciated :)

Sidebar.vue

<template lang="pug">
  div.bg-blue-900.text-white
    div.category Category 1
    a(href="#").item.group
      fa(icon="home")
      span(class="group-hover:opacity-100") Link 1
    a(href="#").item.group.active
      fa(icon="home")
      span(class="group-hover:opacity-100") Link 2
</template>

<style lang="postcss">
  .category { @apply .ml-4 .mt-6 .mb-6 .uppercase .text-sm .font-bold .opacity-75 .group }

  .item { @apply .block .pl-8 .py-1 }
  .item > .svg-inline--fa { @apply .mr-4 }
  .item > span { @apply .opacity-75 }

  .item.active > span { @apply opacity-100 text-orange-600 }
  .item.active > .svg-inline--fa { @apply text-orange-600 }
</style>

nuxt.config.js

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    '~/assets/css/tailwind.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module',
    'nuxt-purgecss',
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        {
          set: '@fortawesome/free-brands-svg-icons',
          icons: ['fab']
        }
      ]
    }]
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    postcss: {
      plugins: {
        tailwindcss: './tailwind.config.js'
      }
    },
    extractCSS: true,
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  },
  /*
  ** Purge CSS
  */
  purgeCSS: {}
}

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

package.json

{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "My legendary Nuxt.js project",
  "author": "Benoit Eccli",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-brands-svg-icons": "^5.9.0",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@nuxtjs/axios": "^5.3.6",
    "nuxt": "^2.0.0",
    "nuxt-fontawesome": "^0.4.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/eslint-module": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "coffee-loader": "^0.9.0",
    "coffeescript": "^2.4.1",
    "eslint": "^5.15.1",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.18.9",
    "nuxt-purgecss": "^0.2.1",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "tailwindcss": "^1.0.0"
  }
}

[beneccli]

A little update

I should have added my tailwind configuration:

tailwind.config.js

// See default config https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
module.exports = {
  theme: {
    extend: {}
  },
  variants: {
    textColor: ['group-hover'],
  }
}

From what I observed, I can @apply any class already in css files imported in tailwind.css (base, components and utilities).

Any class that is not in those css files are not found when trying to use @apply even if I "activate" them via tailwind.config.js (e.g. group-hover for text colors).

I started to believe that <style> of vue files might be interpreted before the custom configuration of tailwind was fully "loaded", but a few tests shows that tailwind configuration is correctly loaded beforehand.

N.B. : Just to be clear enough, group and group-hover work properly when I add them to 'class=""' attribut, but I can't use them in custom classes by using @apply:

/* Works */
<div class="group">...</div>
/* Error */
.custom { @apply .group }

[hacknug]

Yeah, you can only use @apply with classes that have only one definition on your stylesheet. .group is a special class inside of Tailwind that is used for all group- variants (which means is used at least once for every color on you config file).

You're not going to be able to apply this class in any way since this is how @apply works by design. You can read more on the docs (second last paragraph of the linked sections mentions this):

https://tailwindcss.com/docs/functions-and-directives/#apply
https://tailwindcss.com/docs/extracting-components/#extracting-css-components-with-apply

[beneccli]

Oh ok, at least that's clear, thank you for your enlightenment.

I close this issue then.