Tailwindcss @apply directive doesn't work inside vue component

Question

I create a laravel application with jetstream and inertia-vue stack for my new project problem is Tailwindcs version 2 using postCss and it doesn't support @apply directive inside vue components but inside .css file it works fine I don't want that because that css file will load my every page I just want short inline utility classes with @apply directive but I can't, How Can I achieve that.?

inside my vue template

<template>
 <div class="mt-4">
  <label for="hello">Hello</label>
  <input id="hello" class="input"/>
 </div>
</templete>

<style scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

output inside browser like this

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

webpack.config.js

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

tailwind version : "^2.0.1",
laravel version : 8.x,
jetstream version : 2.x,
inertiajs version: "^0.8.2"

Gooseherd

Could this be related: https://mcmap.net/q/1161964/-apply-not-working-inside-vue-component-in-laravel-mix? – Slowdown

Nope I tried that, not work for me. – Gooseherd

Answer 1

You have to set the lang="postcss" attribute on the <style> tag as Tailwind is a PostCSS plugin.

So change this

<style scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

To this

<style lang="postcss" scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

Rosinski

using this approach results in follwing error : Module parse failed: Unexpected token (19:0) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | > .btn{ | color :white; | } Any ideas ? – Landside

@BartMommens A quick Google search resulted in this - github.com/tailwindlabs/discuss/issues/452 – Rosinski

thanks for the link. i've came across a lot of different solutions for this issue. none seemed to work properly after the upgrade from jetstream 1x to 2x. Ended up removing all the @ apply from scoped styling in vue components and putting everything in separate stylesheet. No errors anymore ... – Landside

Answer 2

A workaround that can temporarily solve this problem:

.

In webpack.config.js

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve('resources/js')
    }
  },
  module: {
    rules: [
      {
        test: /\.(postcss)$/,
        use: [
          'vue-style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  }
}

.

In postcss.config.js (if this file not exist, just create it)

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer')
  ]
}

.

Now you can use in Vue file by adding lang="postcss

<style lang="postcss">
.input-form {
  @apply block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}
</style>

.

This answer is based on the discussion here: https://github.com/laravel-mix/laravel-mix/issues/2778#issuecomment-826121931

Cryotherapy

for me I needed to remove the land="postcss" inside the vue style in order for it to work. – Deuterogamy

Answer 3

Creating postcss.config.js & adding the below snippet worked for me:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Zita