尾风CSS +中的网格不按预期工作
尾风CSS +中的网格不按预期工作
提问于 2022-06-08 15:05:35
我正在做一个注册形式与反应和顺风CSS和我似乎遇到了一个障碍，当我试图使这个标签和文本字段对齐。它的截图如下：表格截图
正如您可能看到的，我打算在县标签和文本字段旁边设置邮政编码标签和文本字段。为了实现这一点，我使用了网格布局，我的代码看起来如下(所讨论的部分在address部分下)：
const SignupPage = () => {
return(
<div className="container rounded-lg shadow-lg mx-auto">
<h1 className="font-hk text-slate-800 text-left font-bold text-2xl p-5 ">Your Info</h1>
<form className="grid grid-cols-1 items-start gap-1 sm:grid-cols-2">
{/*Title Selector*/}
<label className="font-hk px-5 text-lg text-left text-slate-800 row-start-1 sm:row-start-1">Title</label>
<select className="font-hk font-light rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 mx-5 row-start-2 sm:col-span-2" >
<option>Select one ...</option>
<option>Mr</option>
<option>Mrs</option>
<option>Miss</option>
<option>Ms</option>
</select>
{/*Name fields*/}
<label className="font-hk px-5 pt-2 text-lg text-left text-slate-800 row-start-3">First name</label>
<input type="text" className="mx-5 font-hk font-light rounded-lg border border-gray-300 row-start-4 sm:col-start-1" required="true"/>
<label className="font-hk px-5 pt-2 text-lg text-left text-slate-800 row-start-5 sm:row-start-3 sm:col-start-2">Last name</label>
<input type="text" className="mx-5 font-hk font-light rounded-lg border border-gray-300 row-start-6 sm:row-start-4 sm:col-start-2" required="true"/>
{/*Gender Selector and Date-Picker*/}
<lable className="font-hk pt-2 px-5 text-lg text-left text-slate-800 row-start-7 sm:row-start-5">Gender</lable>
<select className="font-hk font-light rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 mx-5 row-start-8 sm:row-start-6 sm:col-span-1" >
<option>Select one..</option>
<option>Male</option>
<option>Female</option>
</select>
<label className="font-hk pt-2 px-5 text-lg text-left text-slate-800 row-start-8 sm:row-start-5 sm:col-start-2">Date of Birth</label>
<input type="date" className="font-hk mx-5 pt-2 px-5 text-left text-slate-800 rounded-lg border border-gray-300 row-start-9 sm:row-start-6 sm:col-start-2" />
{/*Address*/}
<label className="font-hk px-5 pt-2 text-lg text-left text-slate-800 row-start-10 sm:row-start-7">Street</label>
<input type="text" className="mx-5 font-hk font-light rounded-lg border border-gray-300 row-start-11 sm:row-start-8 sm:col-start-1" required="true"/>
<label className="font-hk px-5 pt-2 text-lg text-left text-slate-800 row-start-12 sm:row-start-7 sm:col-start-2">City</label>
<input type="text" className="mx-5 font-hk font-light rounded-lg border border-gray-300 row-start-13 sm:row-start-8 sm:col-start-2" required="true"/>
<label className="font-hk px-5 pt-2 text-lg text-left text-slate-800 row-start-14 sm:row-start-9">County</label>
<input type="text" className="mx-5 font-hk font-light rounded-lg border border-gray-300 row-start-15 sm:row-start-10 sm:col-start-1" required="true"/>
<label className="font-hk px-5 pt-2 text-lg text-left text-slate-800 row-start-16 sm:row-start-9 sm:col-start-2">Postcode</label>
<input type="text" className="mx-5 font-hk font-light rounded-lg border border-gray-300 row-start-17 sm:row-start-10 sm:col-start-2" required="true" />
</form>
</div>
);
}
export default SignupPage;我已经检查了我的代码，以确定是否使用了正确的row-start-{n}和col-start-{n}值。我甚至尝试显式设置row-span-{n}值，但仍然没有给出预期的结果。有人能给我解释一下这里发生了什么吗？
以下是我所使用的框架的版本，供您参考：
- 尾翼：
3.0.24 - @tailwindcss/forms：
0.5.2 - 反应：
18.1.0
PS:这是我在StackOverflow上的第一个问题
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-08 17:40:12
在开箱即用的情况下，尾风不支持大于row-start的row-start-7值。请参阅：https://tailwindcss.com/docs/grid-row
您可以通过使用“任意值”实用程序类格式：row-start-[8]来内联添加自定义值。
或者，您可以将值8-10添加到tailwind.config.js文件中，以扩展此实用程序类。
module.exports = {
theme: {
extend: {
gridRowStart: {
'8': '8',
'9': '9',
'10': '10'
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72548064
复制相关文章
相似问题
腾讯云开发者
