Kevin Schaich kevinschaich
kevinschaich
/ tailwind-breakpoints.css
Created
May 7, 2025 20:03
Tailwind v4 breakpoints cut off at 640px which doesn't let you design for different modern phones sizes. These add `3xs`, `2xs`, and `xs`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import 'tailwindcss'; | |
| @theme { | |
| /* Very old phones */ | |
| /* iPhone 3G: 320 x 480 */ | |
| --breakpoint-3xs: 300px; | |
| /* Small Phones in Portrait Mode */ | |
| /* iPhone 7: 375 x 667 */ | |
| /* iPhone 8: 375 x 667 */ |
kevinschaich
/ tailwind.config.js
Last active
May 7, 2025 20:02
Tailwind v3 breakpoints cut off at 640px which doesn't let you design for different modern phones sizes. These add `3xs`, `2xs`, and `xs`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| // https://viewport-tester.com | |
| screens: { | |
| // Very old phones | |
| // iPhone 3G: 320 x 480 | |
| '3xs': { min: '300px' }, | |
| // Small Phones in Portrait Mode | |
| // iPhone 7: 375 x 667 |