如何使用网格属性和TailwindCSS增加输入框的水平宽度

Question

下面的代码是我使用TailWindCSS的next.js页面。

我想通过放大网格使前两个输入框的宽度更大。

我可以设置诸如"；w-56〃；在输入框上使其更大，但随后我必须在两个输入框上指定此属性。

我只想用grid属性来放大div的宽度。我该怎么做？

import { NextPage } from "next";
import { AtSymbolIcon, FingerPrintIcon } from "@heroicons/react/24/outline";
// interface Props {}
const SignIn: NextPage = (props): JSX.Element => {
return (
<div className="h-screen grid place-items-center">
<form className="flex flex-col">
<h1 className="text-3xl mb-3 mx-auto">Login</h1>
<div className="flex items-center space-x-2 rounded-full bg-gray-100 p-3 mb-3">
<AtSymbolIcon className="grow-0 h-5 w-5" />
<input
className="grow bg-transparent outline-none"
type="email"
placeholder="Your email"
/>
</div>
<div className="flex items-center space-x-2 rounded-full bg-gray-100 p-3 mb-3">
<FingerPrintIcon className="h-5 w-5" />
<input
className="bg-transparent outline-none"
type="password"
placeholder="Your passworsd"
/>
</div>
<input
className="bg-cyan-100 mx-auto rounded-xl max-w-fit p-3 hover:bg-cyan-200"
type="submit"
value="Login"
/>
</form>
</div>
);
};
export default SignIn;

可以是div w/"；flex flex col"；正在限制网格。然后我如何将其放大为类似"；最大-w-lg"？我只能使用类似于"；w-96"；。

Answer 1

只需将w-56添加到任何包含输入的div中，如

<div className="flex items-center space-x-2 rounded-full bg-gray-100 p-3 mb-3 w-56">

顺风上的完整代码播放

<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen grid place-items-center">
<form class="flex flex-col">
<h1 class="text-3xl mb-3 mx-auto">Login</h1>
<div class="flex items-center space-x-2 rounded-full w-56 bg-gray-100 p-3 mb-3">
<AtSymbolIcon class="grow-0 h-5 w-5" />
<input
class="grow bg-transparent  outline-none"
type="email"
placeholder="Your email"
/>
</div>
<div class="flex items-center space-x-2 rounded-full bg-gray-100 p-3 mb-3">
<FingerPrintIcon class="h-5 w-5" />
<input
class="bg-transparent outline-none"
type="password"
placeholder="Your passworsd"
/>
</div>
<input
class="bg-cyan-100 mx-auto rounded-xl max-w-fit p-3 hover:bg-cyan-200"
type="submit"
value="Login"
/>
</form>
</div>

记得将class改回className。