Recently, I embarked on a project using Tailwindcss/Next.js and encountered an issue when trying to apply a box-like shadow to a button with a new utility in pure CSS. Despite my efforts, the changes don't seem to take effect. Can you spot what I might have missed?
index.jsx:
...
<button className="text-xl font-bold italic cursor-pointer border-textwhite
border-2 w-52 bg-primary h-10 uppercase box-shadow-black">
Buy Now
</button>
...
index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.box-shadow-black {
box-shadow: 0.125rem 0.125rem 0 0px #000;
}
}