Avatar Caio Fuzatto

Caio Fuzatto

Media Queries com TailwindCSS

22 de junho de 2023

Estou usando TailwindCSS em um side project, inclusive neste site também. Hoje aprendi como fazer media query com TailwindCSS, e é bem simples.

Aqui temos um exemplo de media query em CSS, esse exemplo exibe o elemento apenas em telas menores que 768px:

.container {
  display: block;
}

@media (min-width: 768px) {
  .container {
    display: none;
  }
}

Agora vamos ver como fazer a mesma coisa com TailwindCSS:

<div class="block md:hidden">
  <!-- ... -->
</div>

Basicamente o TailwindCSS utiliza o mesmo conceito de media query do CSS, porém com classes CSS. Você pode ver os breakpoints (sm, md, lg e etc...) na documentação do TailwindCSS

FrontEnd