Error: missing '}'

[Drillan767]

Hello, it may be a rookie mistake but I'm having a problem using @apply in my project.
I just wanted to slowly remove the dozens of classes that are in my templates and set them in my scss file but I get an error the moment I try to use @apply. I'm using Tailwind v2.0.1, by the way.

Here my app.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~tailwindcss/dist/tailwind.min.css";

@import "partials/admin_layout";

(note: @tailwind works but I still need to import the scss, not sure if normal)

Here is my _admin_layout.scss content:

.section-title {
    @apply font-semibold text-xl;
}

Here is my tailwind.config.js file:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    darkMode: 'media',
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Manrope Regular', ...defaultTheme.fontFamily.sans],
            },

            fontSize: {
                xs: '0.75rem',
                sm: '0.875rem',
                base: '1rem',
                lg: '1.125rem',
                xl: '1.25rem',
                '2xl': '1.5rem',
                '3xl': '1.875rem',
                '4xl': '2.25rem',
                '5xl': '3rem',
                '6xl': '4rem',
            },

            height: {
                "10v": "10vh",
                "20v": "20vh",
                "25v": "25vh",
                "30v": "30vh",
                "40v": "40vh",
                "50v": "50vh",
                "60v": "60vh",
                "70v": "70vh",
                "75v": "75vh",
                "80v": "80vh",
                "90v": "90vh",
                "100v": "100vh",
                "full": "100%",
            },
        },
    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
        fontWeight: ['hover', 'focus'],
    },

    plugins: [require('@tailwindcss/ui')],
};

Here is my webpack.mix.js:

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(require('./webpack.config'));

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

And here is my webpack.config.js:

const path = require('path');

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

When running npm run dev or npm run watch, I get the following error:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: file:///app/resources/sass/app.scss:6:3: missing '}'
    at error (/app/node_modules/css/lib/parse/index.js:62:15)
    at declarations (/app/node_modules/css/lib/parse/index.js:260:26)
    at rule (/app/node_modules/css/lib/parse/index.js:561:21)
    at rules (/app/node_modules/css/lib/parse/index.js:118:70)
    at stylesheet (/app/node_modules/css/lib/parse/index.js:81:21)
    at module.exports (/app/node_modules/css/lib/parse/index.js:565:20)
    at rework (/app/node_modules/rework/index.js:27:21)
    at process (/app/node_modules/resolve-url-loader/lib/engine/rework.js:34:18)
    at Object.resolveUrlLoader (/app/node_modules/resolve-url-loader/index.js:165:33)
    at /app/node_modules/webpack/lib/NormalModule.js:316:20
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/app/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at iterateNormalLoaders (/app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /app/node_modules/sass-loader/dist/index.js:75:5
    at Function.call$2 (/app/node_modules/sass/sass.dart.js:90547:16)
    at _render_closure0.call$1 (/app/node_modules/sass/sass.dart.js:79608:21)
    at _RootZone.runUnary$2$2 (/app/node_modules/sass/sass.dart.js:27030:18)
    at _Future__propagateToListeners_handleValueCallback.call$0 (/app/node_modules/sass/sass.dart.js:25842:51)
    at Object._Future__propagateToListeners (/app/node_modules/sass/sass.dart.js:4537:93)
    at _Future._completeWithValue$1 (/app/node_modules/sass/sass.dart.js:25685:9)
    at _AsyncAwaitCompleter.complete$1 (/app/node_modules/sass/sass.dart.js:25027:14)
    at Object._asyncReturn (/app/node_modules/sass/sass.dart.js:4285:17)
    at /app/node_modules/sass/sass.dart.js:13237:24
    at _wrapJsFunctionForAsync_closure.$protected (/app/node_modules/sass/sass.dart.js:4313:15)
    at _wrapJsFunctionForAsync_closure.call$2 (/app/node_modules/sass/sass.dart.js:25057:12)
    at _awaitOnObject_closure.call$1 (/app/node_modules/sass/sass.dart.js:25043:32)
    at _RootZone.runUnary$2$2 (/app/node_modules/sass/sass.dart.js:27030:18)
    at _Future__propagateToListeners_handleValueCallback.call$0 (/app/node_modules/sass/sass.dart.js:25842:51)
    at Object._Future__propagateToListeners (/app/node_modules/sass/sass.dart.js:4537:93)
    at _Future._completeWithValue$1 (/app/node_modules/sass/sass.dart.js:25685:9)
    at _AsyncAwaitCompleter.complete$1 (/app/node_modules/sass/sass.dart.js:25027:14)
    at Object._asyncReturn (/app/node_modules/sass/sass.dart.js:4285:17)
    at /app/node_modules/sass/sass.dart.js:17935:24
    at _wrapJsFunctionForAsync_closure.$protected (/app/node_modules/sass/sass.dart.js:4313:15)
    at _wrapJsFunctionForAsync_closure.call$2 (/app/node_modules/sass/sass.dart.js:25057:12)
    at _awaitOnObject_closure.call$1 (/app/node_modules/sass/sass.dart.js:25043:32)
    at _RootZone.runUnary$2$2 (/app/node_modules/sass/sass.dart.js:27030:18)
    at _Future__propagateToListeners_handleValueCallback.call$0 (/app/node_modules/sass/sass.dart.js:25842:51)
    at Object._Future__propagateToListeners (/app/node_modules/sass/sass.dart.js:4537:93)
    at _Future._completeWithValue$1 (/app/node_modules/sass/sass.dart.js:25685:9)
    at _AsyncAwaitCompleter.complete$1 (/app/node_modules/sass/sass.dart.js:25027:14)
 @ multi ./resources/js/app.js ./resources/sass/app.scss /js/app[1]

What did I do wrong?

Thanks in advance

[MartinHughes-BPC]

Try wrapping your apply in an @ layer, ie:

@layer components{

    .bob {
        @apply min-w-full border divide-y divide-gray-200 mb-8;
    }
    .doug {
        @apply px-6 py-3 text-left bg-gray-50;
    }

}

Cheers,
Martin.

[simonswiss]

Hello!

I am pretty sure this is because you're trying to have @import statements after your Tailwind directives. Perhaps you should try change your directives to this:

- @tailwind base;
+ @import "tailwindcss/base";
- @tailwind components;
+ @import "tailwindcss/components";
- @tailwind utilities;
+ @import "tailwindcss/utilities";

You'll also want to make sure you're using the postcss-import PostCSS plugin.

You should definitely not have to do the @import "~tailwindcss/dist/tailwind.min.css" line after your three @taliwind directives.

note: @tailwind works but I still need to import the scss, not sure if normal

What do you mean by that? It sounds like if it'snot working if you're trying to import Tailwind's minified CSS after that.

[Drillan767]

Hello, thanks for your reply, I didn't have the notification I got answers so I just found out I had responses!
So I didn't have postcss-import, I tried to install it but let's say I'm facing trouble with PostCSS 8 compatibility that would require a whole question on its own, plus I didn't know what I'm doing.

Long story short, I discovered a plugin especially made to run with Laravel Mix, and now it works, even for the @apply method. Thanks for your time and for setting me on the right path!