Tailwind Breakpoints

up:: TailwindCSS

prefix	Min width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Log breakpoint snippet:

Add this to the console in dev tools.

window.addEventListener('resize', function(event){
	const width = window.innerWidth;
	let prefix = '';
	if (width > 1536) {
		prefix = '2xl'
	} else if (width > 1280) {
		prefix = 'xl'
	} else if (width > 1024) {
		prefix = 'lg'
	} else if (width > 768) {
		prefix = 'md'
	} else if (width > 640) {
		prefix = 'sm'
	} 
  console.log(`${prefix} (${width})`);
});

Display as a div

var b = document.createElement('div');
var bS = b.style;
const prefixText = () => {
	const width = window.innerWidth;
	let prefix = '';
	if (width > 1536) { prefix = '2xl'
	} else if (width > 1280) {
		prefix = 'xl'
	} else if (width > 1024) {
		prefix = 'lg'
	} else if (width > 768) {
		prefix = 'md'
	} else if (width > 640) {
		prefix = 'sm'
	}  
return `${prefix} (${width})`;
}
bS.position = 'fixed';
bS.bottom = 0;
bS.right = 0;
bS.background = '#fff';
bS.padding = '5px';
bS.zIndex = 100000;
bS.display = 'block';
bS.fontSize = '12px';
bS.fontFamily = 'JetBrains Mono';
b.innerText = prefixText();
b.addEventListener("click", function(){bS.display = 'none';}, false);
document.body.appendChild(b);
window.addEventListener('resize', function(event){
  bS.display = 'block';
  b.innerText = prefixText();
});

As a bookmarklet

javascript: (() => { var b = document.createElement("div"); var bS = b.style; const prefixText = () => { const width = window.innerWidth; let prefix = ""; if (width > 1536) { prefix = "2xl"; } else if (width > 1280) { prefix = "xl"; } else if (width > 1024) { prefix = "lg"; } else if (width > 768) { prefix = "md"; } else if (width > 640) { prefix = "sm"; } return `${prefix} (${width})`; }; bS.position = "fixed"; bS.bottom = 0; bS.right = 0; bS.background = "#fff"; bS.padding = "5px"; bS.zIndex = 100000; bS.display = "block"; bS.fontSize = "12px"; bS.fontFamily = "system-ui"; b.innerText = prefixText(); b.addEventListener( "click", function () { bS.display = "none"; }, false); document.body.appendChild(b); window.addEventListener("resize", function (event) { bS.display = "block"; b.innerText = prefixText(); }); })();