Início / coding / Perguntas / 79371498
Accepted
TreyCollier
Asked: 2025-01-20 21:35:47 +0800 CST

Colunas de grade responsivas usando Tailwind

  • 772

Sou novo no Tailwind e estou tendo um problema com meu layout de grade.

<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>

Meu objetivo era ter o Log Inbotão ao lado da entrada de texto em dispositivos maiores, mas abaixo em dispositivos menores.

No entanto, estou tendo esse problema em que há um ponto entre 768pxe 1024pxonde o layout da grade não está funcionando como eu esperava.

Entendo 768pxque é o ponto de interrupção para dispositivos médios e 1024pxé o ponto de interrupção para dispositivos grandes.

Imagino que seja algo bobo, mas não consigo entender direito.

Anexei imagens para mostrar o problema.

A segunda imagem é o layout de grade quando a largura da tela está entre 768 e 1024 pixels.

Pelo que entendi, especifiquei 4 colunas para dispositivos médios e para <Box>ocupá-las 3. E qualquer coisa menor que 768px deve usar apenas uma coluna.

UI quando largura <768px

UI quando largura >768px mas <1024px

UI quando largura >1024px

tailwind-css

1 respostas

  1. Best Answer

    Os pontos de interrupção no Radix UI e no TailwindCSS são diferentes.

    SOLUÇÃO 1

    Para Radix UI, o ponto de interrupção MD é 1024px ( veja aqui ). Para TailwindCSS, é 768px ( veja aqui ).

    Então você deve usar a combinação Radix md e Tailwind lg, ou Radix sm e Tailwind md, dependendo da sua preferência.

    No seu caso, você teria que trocar seu código por um dos seguintes trechos.

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

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

    Observe que Radix xs e xl não correspondem às suas contrapartes TailwindCSS (sm e 2xl).

    SOLUÇÃO 2

    Altere seu tema na configuração do tailwind ( veja aqui )

    E use os seguintes valores:

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

    Dessa forma, os valores de responsividade entre o Radix UI e o TailwindCSS corresponderão.

    • 1

relate perguntas