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.
```js
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
```js
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(); }); })();
```