Generate responsive breakpoints. CSS media queries or Tailwind config. sm, md, lg, xl.
Generate responsive breakpoints. CSS media queries or Tailwind config. sm, md, lg, xl.
Category: Design-Tools • Free online tool • No signup required
Tools, die Sie als Nächstes brauchen könnten
Convert pixels to rem. Custom base font size. For responsive typography.
Design-ToolsConvert em to pixels. Custom base. For typography and layout.
Design-ToolsConvert between px, pt, em, rem, %, vw. All font size units. For typography.
Design-ToolsCalculate line-height from font size and multiplier. For typography and readability.
Design-ToolsCalculate letter-spacing in em from px. For typography and design.
Design-ToolsVisual aspect ratio calculator with width/height inputs, common presets (16:9, 4:3, 1:1), device presets (iPhone, MacBook, 4K), and CSS aspect-ratio output.
Design-Tools@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}@include breakpoint(sm) {
/* your styles */
}
@include breakpoint(md) {
/* your styles */
}
@include breakpoint(lg) {
/* your styles */
}
@include breakpoint(xl) {
/* your styles */
}
@include breakpoint(2xl) {
/* your styles */
}// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
2xl: '1536px'
}
}
}
}