Breakpoints

1<!-- Mobile-first responsive classes -->
2<div class="
3  grid
4  grid-cols-1    /* Mobile: 1 column */
5  sm:grid-cols-2 /* 640px+: 2 columns */
6  md:grid-cols-3 /* 768px+: 3 columns */
7  lg:grid-cols-4 /* 1024px+: 4 columns */
8">
9  ...
10</div>
11
12<!-- Hide/show at breakpoints -->
13<div class="hidden md:block">
14  Visible on tablet and up
15</div>
16
17<div class="block md:hidden">
18  Visible only on mobile
19</div>

1/* Mobile first approach */
2.element {
3  padding: 1rem; /* Base: mobile */
4}
5
6@media (min-width: 640px) {
7  .element {
8    padding: 1.5rem; /* sm: tablets */
9  }
10}
11
12@media (min-width: 1024px) {
13  .element {
14    padding: 2rem; /* lg: desktop */
15  }
16}