next.js 为什么我的TailwindCSS响应式设计不工作?

q3aa0525  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(189)

我有这个NextJS项目,我同时使用Boostrap和TailwindCSS,但我在Tailwind代码中添加了一个前缀“tw-”。出于某种原因,Tailwind的响应代码不适用。
下面是一个代码,我需要在移动的上使图像更小:

return (
    <div>
        <nav className="bg-light tw-h-[65px] tw-w-full shadow-lg d-flex tw-items-center">
               <AiOutlineMenuUnfold size="2.5rem"/>
            <h4 className="text-primary">Welcome: Tombrown Anuma</h4>
        </nav>
        <Image className="tw-sm:w-[5rem] tw-md:w-[10rem] tw-rounded-full float-end tw-mt-[-3rem]" alt="profile-image" src={ProfilePic}/>
    </div>
);

注意:除了响应代码外,其他所有工作都是预期的。

8ulbf1ek

8ulbf1ek1#

根据文档,“前缀在任何变体修饰符之后添加 *”:

<Image className="sm:tw-w-[5rem] md:tw-w-[10rem] tw-rounded-full float-end tw-mt-[-3rem]" alt="profile-image" src={ProfilePic}/>

相关问题