Tailwindcss: Using Tailwind with vue-cli 3. In components style get error @apply cannot be used with ...

[DonPrus]

When I try to use @apply in my Vue Components styles block I've got:

@apply cannot be used with .bg-teal because .bg-teal either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .bg-teal 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.

Because new version @vue/cli uses package.json to configure PostCSS, the .postcssrc.js is totally ignored.

Here is steps to reproduce my problem:

yarn add tailwindcss
# It installs and add "tailwindcss": "^0.6.5", to my package.json

./node_modules/.bin/tailwind init
# It creates ./tailwind.js in my root folder

I modify tailwind.js and enable shadowLookup experiment (information about this at this PR https://github.com/tailwindcss/tailwindcss/pull/516):

// tailwind.js
options: {
    prefix: '',
    important: false,
    separator: ':',
},
experiments: {
    shadowLookup: true
}

Than I modify my package.json postcss section:

// package.json
"postcss": {
  "plugins": {
    "autoprefixer": {},
    "tailwindcss": {
      "option": "./tailwind.js"
    }
  }
},

Than I create main.css in my assets folder:

/* main.css */
@tailwind preflight;
@tailwind components;
@tailwind utilities;

And finally import it in any .js file, for example main.js:

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import '@/assets/main.css' // here it is

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#admin-chat');

Since that I could use Tailwind css classes in all components, like this:

<!-- Example.vue -->
<div 
class="m-2 bg-transparent hover:bg-teal hover:text-white text-teal py-2 px-4 border border-teal hover:border-transparent rounded">
    {{ room }}
</div>

It shows that TailwindCss is working, but I want to move this to my style block in order to get scoped classes, and you know, a lit more readable class names.

But when I try to use @apply in my style block:

<!-- Example.vue -->
<style scoped>
.button {
  @apply bg-teal border-teal text-sm border-4 text-white py-1 px-2 rounded;
}

.button:hover{
  @apply bg-teal-dark border-teal-dark;
}

.button:disabled{
  @apply bg-grey border-grey text-sm border-4 text-white py-1 px-2 rounded cursor-not-allowed;
}
</style>

I've got error from the top of my message. I could adding @tailwind utilities; to all my styles block, but as I understand shadowLookup: true should solve this problem.

I also could use @apply notations in my ./assets/main.css and it works great, but I want to have styles in components files.

[adamwathan]

Hey @DonPrus, I think this is because of an error in your package.json PostCSS config.

Try changing it to this:

// package.json
"postcss": {
  "plugins": {
    "tailwindcss": "./tailwind.js",
    "autoprefixer": {}
  }
},

Tailwind just needs the string path, not an object. Also, autoprefixer should come last, not before Tailwind.

[DonPrus]

Thanks you, works great!