尾风CSS的网格＆＃x2B;反应不按预期工作

Question

我正在用React和Tailwind CSS进行注册表格，当我试图获得这个标签和文本场时，我似乎已经遇到了障碍。下面外观的屏幕截图： 表格的屏幕截图

，您可能会说明我打算拥有邮政编码标签和文本字段在县的标签和文字场旁边。为了实现此目的，我正在使用网格布局，而我的代码看起来像这样（所讨论的一部分在地址部分下方）：

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> row> row-start- {n}和col-start- {n}值。我什至尝试过明确设置row-span- {n}值，但它仍然没有给我预期的结果。有人可以向我解释这里发生了什么吗？

这些是我正在使用的框架的版本：

• tailwindcss：3.0.24
• @tailwindcss/fillcss/forms：0.5.2
• react：18.1.0 < /代码>

ps：这是我在Stackoverflow上的第一个问题。

Answer 1

开箱即用，tailwind不支持row-start值大于row> row-start-7。 ： https://tailwindcss.com/docs/docs/grid-row

请参阅 通过使用“任意值”实用程序类格式中的值：row> start- [8]。

另外，您可以将值8-10添加到tailwind.config.js文件以扩展此实用程序类。

module.exports = {
  theme: {
    extend: {
      gridRowStart: {
        '8': '8',
        '9': '9',
        '10': '10'
      }
    }
  }
}