Is Tailwind Breakpoints Visualizer free to use?

Yes, Tailwind Breakpoints Visualizer is completely free to use. No signup or registration required.

Is my data safe when using Tailwind Breakpoints Visualizer?

Yes, all processing happens in your browser. Your data never leaves your device and is not stored on any server.

Can I use Tailwind Breakpoints Visualizer on mobile?

Yes, Tailwind Breakpoints Visualizer is fully responsive and works on all devices including smartphones and tablets.

📱

Tailwind Breakpoints Visualizer

Visualize and customize responsive breakpoints for Tailwind CSS

Current Viewport

0px

Breakpoint: base

Presets

Visual Scale

2xl

0px1736px

Breakpoints

Breakpoint Reference

Name	Min Width	CSS	Status
base	0px	Default	Active
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
          "sm": "640px",
          "md": "768px",
          "lg": "1024px",
          "xl": "1280px",
          "2xl": "1536px"
    }
  }
}

Common Devices

iPhone SE375px → base

iPhone 14390px → base

iPhone 14 Pro Max430px → base

iPad Mini768px → md

iPad Pro 11"834px → md

iPad Pro 12.9"1024px → lg

MacBook Air 13"1280px → xl

Desktop 1080p1920px → 2xl

Desktop 1440p2560px → 2xl

Desktop 4K3840px → 2xl