How to Change custom Breakpoints range in Tailwind CSS 4?

[robiul215]

    /* responsive Breakpoint */
    --breakpoint-*: initial;
    --breakpoint-xxl: 1400px;
    --breakpoint-xl: 1200px;
    --breakpoint-lg: 992px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 576px;
    --breakpoint-xsm: @media (width <= 575.98px) { max-width: 575.98px; };

how can I set the screen range for xsm: 0 to 575px in tailwindcss version 4

[wongjn]

You could create your own variant:

@custom-variant xsm @media (width <= 575.98px);

Or do

--breakpoint-xsm: 576px;

<div class="max-xsm:text-black">

Or
Forego the xsm value and use sm:

<div class="max-sm:text-black">

[Farzane2630]

Using custom breakpoints

Use the --breakpoint-* theme variables to customize your breakpoints:

app.css

@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
--breakpoint-2xl: 100rem;
--breakpoint-3xl: 120rem;
}
This updates the 2xl breakpoint to use 100rem instead of the default 96rem, and creates new xs and 3xl breakpoints that can be used in your markup:

Note that it's important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order, causing breakpoint classes to override each other in unexpected ways.

Tailwind uses rem for the default breakpoints, so if you are adding additional breakpoints to the defaults, make sure you use rem as well.

Removing default breakpoints To remove a default breakpoint, reset its value to the initial keyword:

app.css

@import "tailwindcss";
@theme {
--breakpoint-2xl: initial;
}
You can also reset all of the default breakpoints using

--breakpoint-*: initial
then define all of your breakpoints from scratch:

app.css

@import "tailwindcss";
@theme {
--breakpoint-*: initial;
--breakpoint-tablet: 40rem;
--breakpoint-laptop: 64rem;
--breakpoint-desktop: 80rem;
}
Learn more removing default theme values in the theme documentation.

[wongjn]

Please be aware these instructions are for v3, not v4.

[Farzane2630]

Thanks for noting that. I have edited my answer. referring to tailwindcss documentation. I hope this will help solving the issue.