未显示添加顺风实用程序

Question

我最近开始使用 Tailwindcss/Next.js，我想用纯 CSS 的新实用程序给按钮一个框状阴影。但出于某种原因，它不应用更改。我是不是忘记了什么？

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;
  }
}

Answer 1

它有效，但你有小错误：border-textwhite insted of this: text-red-500 and conflict border and border-2 i left border-2 and added more阴影0.2rem显示效果更好！还要记住如何使用 next.js 安装 tailwindcss。祝你好运 ;-)

index.js

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="flex items-center justify-center h-screen flex-col gap-5">
        <button className="text-xl font-bold italic cursor-pointer text-red-500 border-2 w-52 bg-primary h-10 uppercase box-shadow-black">
          Buy Now
        </button>
      </div>
    </div>
  );
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer utilities {
  .box-shadow-black {
    box-shadow: 0.2rem 0.2rem 0.2rem 0px black;
  }
}

输出：

“下一个”：“12.0.7”，“反应”：“17.0.2”，“tailwindcss”：“^3.0.5”

未显示添加顺风实用程序

Adding tailwind utilities doesn't get shown

css

next.js

tailwind-css