Grid in Tailwind CSS + React not working as intended

Question

I am making a signup form with react and tailwind CSS and I seem to have hit a roadblock when I am trying to get this one label and text-field aligned. The screenshot of what it looks like is below: Screenshot of the form

As you can probably make out I intend to have the postcode label and text field next to the county label and text-field. To achieve this I am using the grid layout and my code looks like this (The part in question is under the address section):

const SignupPage = () => {
  return(
    
        Your Info
          

            {/*Title Selector*/}
            Title
            

            {/*Name fields*/}
            First name
            
            Last name
            

            {/*Gender Selector and Date-Picker*/}
            Gender
            
            Date of Birth
            
    
            {/*Address*/}
            Street
            
            City
            
            County
            
            Postcode
            

                 
     
  );
}

export default SignupPage;

I have checked my code to see if I have used the correct row-start-{n} and col-start-{n} values. I even tried explicitly setting the row-span-{n} value and it is still not giving me the intended results. Can someone explain to me what is going on here?

These are the versions of the frameworks I am using for your reference:

tailwindcss: 3.0.24
@tailwindcss/forms: 0.5.2
react: 18.1.0

PS: This is my first question on StackOverflow any pointers on how I could ask questions better in future are appreciated as well :)

user_287476 · Answer

Out of the box, Tailwind does not support row-start values greater than row-start-7. See: https://tailwindcss.com/docs/grid-row

You can add a custom value inline by using the "arbitrary values" utility class format: row-start-[8].

Alternatively, you can add the values 8-10 to your tailwind.config.js file to extend this utility class.

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

Grid in Tailwind CSS + React not working as intended

1 Answers