@apply directive not recognized in VScode

[AzraiHasan]

@adamwathan,

I'm a newbie and was following your video tutorial but even after following every step and making styles to my button inline, i can't register it as a class component in the css/tailwind.css file.

Hope you or anyone here can help me out. Thanks! :)

my package.json file:

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"watch": "postcss css/tailwind.css -o public/build/tailwind.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^9.7.4",
"postcss-cli": "^7.1.0",
"tailwindcss": "^1.2.0"
}
}

my tailwind.css file:

@tailwind base;

@tailwind components;

// the @apply directive was not recognized in here
.btn {
@apply inline-block bg-green-500 text-white font-semibold text-sm tracking-wider text-center uppercase rounded-full shadow-lg py-3 px-4
}

@tailwind utilities;

[adamwathan]

Can you explain what you mean when you say "not recognized"? Did the CSS compile as expected or did it throw an error? Is it just a warning in VS Code you are seeing? If so consider disable CSS linting in VS Code and change the language mode to PostCSS instead of CSS (may require the PostCSS VS Code extension).

[AzraiHasan]

The CSS did not compile as expected. So, when i cut the styles from the html tag and pasted it in the css/tailwind.css file, my button had return to default "Hello World".

While in the css/tailwind.css file, i've inserted the @apply directive, VScode did not identify it like it did when i typed @tailwind base; @tailwind components; and @tailwind utilities;.

Also, VScode gives an error:

at_rule or selector expected

[AzraiHasan]

@adamwathan,

I started a new project folder and the CSS now compiled as expected into the /build/public/tailwin.css file. I can continue with your tutorial videos now.

Currently I just have some VScode settings that i need to sort out but that's secondary.

Thank you!