Built-in breakpoints allow you to easily build adaptive layouts.
Each breakpoint matches a fixed screen width. Values are min-width based and apply when the screen width is equal or greater.
| Size | Width |
|---|---|
initial Phone, all devices | min: 0px |
sm Phone | min: 640px |
md Tablet | min: 768px |
lg Desktop (small) | min: 1024px |
xl Desktop (medium) | min: 1280px |
2xl Desktop (large) | min: 1536px |
You can use the different breakpoint classes in conjunction with Tailwind's special orientation classes (portrait and landscape) to create complex responsive layouts. You can chain instructions in the following way:
<template>
<div
class="bg-indigo-500 md:portrait:bg-yellow-400 md:landscape:bg-green-500 size-4"
/>
</template>
You can customize the breakpoints by adding a --breakpoint-* variable to the @theme directive of your main.css file. Only include the breakpoints you want to override in your configuration or completely new ones:
@theme {
/* Don't include this unless you change it */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* Add your custom breakpoints here */
--breakpoint-3xl: 1920px;
}