未显示添加顺风实用程序
Posted
技术标签:
【中文标题】未显示添加顺风实用程序【英文标题】：Adding tailwind utilities doesn't get shown 【发布时间】：2022-01-20 13:23:02 【问题描述】：我最近开始使用 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;
【问题讨论】：
这些答案解决了你的问题吗？ 【参考方案1】：它可以工作，但你有一些小错误：border-textwhite 安装了这个：text-red-500 和冲突border 和border-2 我离开了border-2 并添加了更多阴影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;
输出：
"next": "12.0.7","react": "17.0.2","tailwindcss": "^3.0.5"
【讨论】：
以上是关于未显示添加顺风实用程序的主要内容，如果未能解决你的问题，请参考以下文章
成功检出 svn 文件，但在导航器和源代码控制实用程序区域中均未显示 SCM 状态
在核心数据实用程序教程中未调用 setNilValueForKey
在我构建 Android 时的 Expo（未找到 `keytool` 实用程序）