Tailwind defines five breakpoints by default.

  • sm640px
  • md768px
  • lg1024px
  • xl1280px
  • 2xl1536px

Similar to hover:, you can prefix any utility class with a breakpoint. When prefixed, a utility class only takes effect at that breakpoint and above.

For example, md:font-bold makes an element's text bold only from the md breakpoint and up. When the viewport is smaller than 769px, this utility class will have no effect.

How can you apply a horizontal padding of 4 on the md breakpoint and above?