Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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"/>
</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"
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>
                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 ?
– Bart Mommens
                Feb 12, 2021 at 10:13
                @BartMommens A quick Google search resulted in this - github.com/tailwindlabs/discuss/issues/452
– user13808929
                Feb 12, 2021 at 20:28
                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 ...
– Bart Mommens
                Feb 13, 2021 at 11:16
          '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
                for me I needed to remove the land="postcss" inside the vue style in order for it to work.
– shamaseen
                Nov 14, 2021 at 0:34
Creating postcss.config.js & adding the below snippet worked for me:
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.