O Tailwind CSS facilita a criação de designs responsivos ao fornecer classes utilitárias para breakpoints e media queries.

Breakpoints

Breakpoints no Tailwind CSS são definidos em tamanhos de tela específicos, permitindo aplicar estilos diferentes em larguras de viewport distintas.

Breakpoints Padrão

Esses breakpoints podem ser usados como prefixos para aplicar estilos condicionalmente com base na largura do viewport.

Explicação

1. bg-blue-500: Define a cor de fundo como um tom de azul por padrão;
2. p-4: Adiciona preenchimento de 1rem (16px) em todos os lados;
3. sm:bg-green-500: Define a cor de fundo como um tom de verde em telas pequenas e maiores (largura mínima: 640px);
4. md:bg-red-500: Define a cor de fundo como um tom de vermelho em telas médias e maiores (largura mínima: 768px);
5. lg:bg-yellow-500: Define a cor de fundo como um tom de amarelo em telas grandes e maiores (largura mínima: 1024px);
6. xl:bg-purple-500: Define a cor de fundo como um tom de roxo em telas extra grandes e maiores (largura mínima: 1280px).

Aplicação de estilos responsivos

É possível aplicar estilos responsivos a qualquer classe utilitária no Tailwind CSS prefixando-a com um breakpoint.

Explicação

Preenchimento (Padding):

1. p-4: Adiciona preenchimento de 1rem (16px) em todos os lados por padrão;
2. sm:p-6: Adiciona preenchimento de 1.5rem (24px) em todos os lados para telas pequenas e maiores (min-width: 640px);
3. md:p-8: Adiciona preenchimento de 2rem (32px) em todos os lados para telas médias e maiores (min-width: 768px);
4. lg:p-10: Adiciona preenchimento de 2.5rem (40px) em todos os lados para telas grandes e maiores (min-width: 1024px);
5. xl:p-12: Adiciona preenchimento de 3rem (48px) em todos os lados para telas extra grandes e maiores (min-width: 1280px).

Tamanho do Texto:

1. sm:text-sm: Define o tamanho da fonte como pequeno (0.875rem ou 14px) para telas pequenas e maiores (min-width: 640px);
2. md:text-base: Define o tamanho da fonte como base (1rem ou 16px) para telas médias e maiores (min-width: 768px);
3. lg:text-lg: Define o tamanho da fonte como grande (1.125rem ou 18px) para telas grandes e maiores (min-width: 1024px);
4. xl:text-xl: Define o tamanho da fonte como extra grande (1.25rem ou 20px) para telas extra grandes e maiores (min-width: 1280px).

Peso da Fonte:

1. sm:font-light: Aplica peso de fonte leve para telas pequenas e maiores (min-width: 640px);
2. md:font-normal: Aplica peso de fonte normal para telas médias e maiores (min-width: 768px);
3. lg:font-semibold: Aplica peso de fonte seminegrito para telas grandes e maiores (min-width: 1024px);
4. xl:font-bold: Aplica peso de fonte negrito para telas extra grandes e maiores (min-width: 1280px).

Nota

Procura informações específicas sobre responsividade? Consulte o seguinte link.