html – Tailwind ver3.2.4: @apply designs do not used in any way

I began finding out Tailwind structure by complying with the “From No to Manufacturing” collection on thier main youtube network yet I’m piling in @apply which it does not operate at all and also Vscode maintain revealing me a caution “Unidentified at policy @apply”.
I have actually checked out the docs on thier website and also whatever is okay and also absolutely nothing various.

right here are the arrangements and also my code:

tailwind.config.js

/ ** @type {import(' tailwindcss'). Config} */.
module.exports = {
web content: ["./src/**/*.{html,js}"],.
motif: {
prolong: {},.
},.
plugins: [],.
}

postcss.config.js

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

package.json

 {
" name": "tailwind",.
" variation": "1.0.0",.
" summary": "",.
" primary": "index.js",.
" manuscripts": {
" begin": "vite".
},.
" key phrases": [],.
" writer": "",.
" permit": "ISC",.
" devDependencies": {
" autoprefixer": "^ 10.4.13",.
" postcss": "^ 8.4.20",.
" tailwindcss": "^ 3.2.4",.
" vite": "^ 4.0.0".
}
}

style.css

 @tailwind base;.
@tailwind elements;.
@tailwind energies;.

@layer elements {
. btn {
@apply inline-block px-5 py-3 rounded-lg emphasis: outline-none emphasis: ring emphasis: ring-offset-2 capital tracking-wider font-semibold text-sm sm: text-base;.
}
. btn-primary {
@apply bg-indigo-500 text-white hover: bg-indigo-400 emphasis: ring-indigo-500 emphasis: ring-opacity-50 energetic: bg-indigo-600;.
}
. btn-secondary {
@apply bg-gray-300 text-gray-800 float: bg-gray-200 emphasis: ring-gray-300 emphasis: ring-opacity-50 energetic: bg-gray-400;.
}
}

index.html

<< head>>.
<< meta charset=" UTF-8"/>>.
<< meta http-equiv=" X-UA-Compatible" web content=" IE= side"/>>.
<< meta name=" viewport" web content=" size= device-width, initial-scale= 1.0"/>>.
<< web link rel=" styleshee" href=" style.css"/>>.
<< manuscript src=" https://cdn.tailwindcss.com"><>  < title>> File<.
<.
<< body course=" bg-gray-600">
<> < div course=" bg-gray-100 grid lg: grid-cols-2">>.
<< div course=" p-8 py-12 max-w-md mx-auto sm: max-w-xl lg: max-w-full">>.
<< h3 course="">> Workation< < img src="./ coffee-bg10. jpg"
course=" mt-6 rounded-lg shadow-xl lg: concealed" alt=" simply an img"/>>.
<< h1 course=" mt-6 text-2xl font-bold text-gray-900 sm: mt-8 lg: text-4xl">> You can function from anywhere.<< br> <> < period course=" text-indigo-500">> Benefit from it.< .
<< p course=" mt-2 text-gray-600">> Lorem ipsum dolor, rest amet consectetur adipisicing elit. ccusamus repudiandae sapiente. Repepsam laudantium fugiat at unde. Facere, voluptates quidem!<.
<< div course=" mt-6">
<> < a href=" #" course=" inline-block bg-indigo-500 float: bg-indigo-700 energetic: translate-y-0.5 change change emphasis: outline-none emphasis: ring emphasis: ring-offset-2 emphasis: ring-indigo-700 text-white text-sm capital font-semibold tracking-wider px-5 py-3 rounded-lg shadow-lg">> Reserve your Getaway<.
<< a href=" #" course=" btn-primary">> or right here<.
<.
<.
<< div course=" covert lg: block family member">>.
<< img src="./ coffee-bg10. jpg"
course=" outright inset-0 w-full h-full object-cover object-center" alt=" simply an img"/>>.
<.
<.
<.
<.