How to solve this error

[JOY2OP]

[plugin:vite:css] [postcss] C:/Users/welcome/Desktop/ai_summarizer/src/App.css:73:5: Thesm:class does not exist. Ifsm:is a custom class, make sure it is defined within a@layerdirective. C:/Users/welcome/Desktop/ai_summarizer/src/App.css:73:5 71 | 72 | .app { 73 | @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm: px-16 px-6; | ^ 74 | } 75 |

I followed the exact same steps in the video, installed all the dependencies even started from scratch but no success

[JOY2OP]

[spirit-124]

hey man Got the same error while implementing the project , just try solving it by backspacing all the black spaces after every focus: , sm: , hover: etc . under the @apply directives try applying below mentioned code, it will work fine 🚀

` / Tailwind Styles / .app { @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; }

.black_btn { @apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black; }

.head_text { @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center; }

.orange_gradient { @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent; }

.desc { @apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl; }

.url_input { @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-10 pr-12 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0; }

.submit_btn { @apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400; }

.link_card { @apply p-3 flex justify-start items-center flex-row bg-white border border-gray-200 gap-3 rounded-lg cursor-pointer; }

.copy_btn { @apply w-7 h-7 rounded-full bg-white/10 /shadow-[inset10px-50px_94px_0_rgb(199, 199, 199, 0.2)] / backdrop-blur flex justify-center items-center cursor-pointer; }

.blue_gradient { @apply font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent; }

.summary_box { @apply rounded-xl border border-gray-200 bg-white/20 / shadow-[inset10px-50px_94px_0_rgb(199, 199, 199, 0.2)] / backdrop-blur p-4; } `)

[JOY2OP]

Turns out my vscode was set to "format on save" and it's been altering the spacing. Thank you for your reply.

[sriragavip]

same issue

[sriragavip]

in line 72