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: Narzędzia projektowe • Free online tool • No signup required
Narzędzia, których możesz potrzebować
Convert pixels to rem. Custom base font size. For responsive typography.
Narzędzia projektoweConvert em to pixels. Custom base. For typography and layout.
Narzędzia projektoweConvert between px, pt, em, rem, %, vw. All font size units. For typography.
Narzędzia projektoweCalculate line-height from font size and multiplier. For typography and readability.
Narzędzia projektoweCalculate letter-spacing in em from px. For typography and design.
Narzędzia projektoweVisual 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.
Narzędzia projektowe@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'
}
}
}
}