Connect // Redes sociais

Media Queries com TailwindCSS

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