I am new to Tailwind and encountering a problem with my Grid layout.

<Grid
  gap="3"
  columns={{ initial: '1', md: '4' }}
  align="end"
>
  <Box className="md:col-span-3">
    <Text
      as="p"
      mb="1"
    >
      Password
    </Text>
    <TextField.Root
      type="password"
      placeholder="Password..."
      {...register('password')}
    />
    <ErrorMessage className="mt-5">{errors.password?.message}</ErrorMessage>
  </Box>
  <Button
    disabled={isSubmitting}
  >
    Log In {isSubmitting && <Spinner />}
  </Button>
</Grid>

My aim was to have the Log In button next to the text input on larger devices, but below on smaller ones.

However, I am having this problem where there is a point between 768px and 1024px where the grid layout isn't working as I expected.

I understand 768px is the breakpoint for medium devices, and 1024px is the breakpoint for large devices.

I imagine it is something silly, but can't quite work it out.

I have attached images to show the issue.

The 2nd image is the Grid layout when the screen width is between 768 and 1024 pixels.

My understanding is that, I specified 4 columns for medium devices, and for the <Box> to take up 3 of those. And anything smaller than 768px should use just one column.

I am new to Tailwind and encountering a problem with my Grid layout.

<Grid
  gap="3"
  columns={{ initial: '1', md: '4' }}
  align="end"
>
  <Box className="md:col-span-3">
    <Text
      as="p"
      mb="1"
    >
      Password
    </Text>
    <TextField.Root
      type="password"
      placeholder="Password..."
      {...register('password')}
    />
    <ErrorMessage className="mt-5">{errors.password?.message}</ErrorMessage>
  </Box>
  <Button
    disabled={isSubmitting}
  >
    Log In {isSubmitting && <Spinner />}
  </Button>
</Grid>

My aim was to have the Log In button next to the text input on larger devices, but below on smaller ones.

However, I am having this problem where there is a point between 768px and 1024px where the grid layout isn't working as I expected.

I understand 768px is the breakpoint for medium devices, and 1024px is the breakpoint for large devices.

I imagine it is something silly, but can't quite work it out.

I have attached images to show the issue.

The 2nd image is the Grid layout when the screen width is between 768 and 1024 pixels.

My understanding is that, I specified 4 columns for medium devices, and for the <Box> to take up 3 of those. And anything smaller than 768px should use just one column.

• tailwind-css
• tailwind-ui
• radix-ui

1 Answer 1

The breakpoints in both Radix UI and TailwindCSS are different.

SOLUTION 1

For Radix UI, the MD breakpoint is 1024px (see here) For TailwindCSS it's 768px (see here)

So you should use the combination or either Radix md and Tailwind lg, or Radix sm and Tailwind md depending on your preference.

In your case you would have to switch out your code with one of the following snippets.

<Grid
  gap="3"
  columns={{ initial: '1', sm: '4' }}
  align="end"
>

<Box className="lg:col-span-3">

Do note that Radix xs and xl do not match their TailwindCSS (sm and 2xl) counter part.

SOLUTION 2

Change your theme in the tailwind config (see here)

And use the following values:

screens: {
    xs: '520px',
    sm: '768px',
    md: '1024px',
    lg: '1280px',
    xl: '1640px',
}

This way the responsiveness values will match between Radix UI and TailwindCSS.