Screen

In Tailwind CSS v4, breakpoint customization has moved from JavaScript configuration files to a “CSS-first” approach. You can view the default breakpoints and extend or override them directly in your CSS.

Default Breakpoints

Tailwind includes five default breakpoints inspired by common device resolutions:

Customizing Breakpoints

To add a new breakpoint in v4, you add a CSS variable starting with --breakpoint- to your @theme block.

@theme {
  --breakpoint-3xl: 1920px;
}

This will automatically create a 3xl: variant that you can use in your HTML:

<div class="3xl:grid-cols-4 grid grid-cols-1">
  <!-- Content -->
</div>

CSS-First Configuration

Unlike previous versions where you might edit tailwind.config.js, Tailwind v4 allows you to manage all your design tokens directly in your CSS files. This keeps your configuration closer to your styles and simplifies the setup.

For a deeper understanding of responsive design in Tailwind CSS v4, refer to the official Responsive Design documentation.