Breackpoint not working

[Mostafa-Mohammadi]

When I use the LG or XL breakpoints, the MD doesn't seem to work

[mubaraqwahab]

Could you create a code sample using the playground?

[simonswiss]

Hi @kyle-hensoon 👋

I may interpret the question the wrong way - but I think I know what you're experiencing.

TL;DR: your lg and xl styles are overriding the ones applied in md, due to the "mobile first" nature of Tailwind CSS.

Detailed answer

Tailwind styles are designed to work mobile first: styles without prefixes apply to everything, and then breakpoint prefixes override styles for larger screens.

For example, take the following code (available as a Play demo):

<div class="bg-pink-300 sm:bg-blue-300 md:bg-purple-300 lg:bg-teal-300 xl:bg-green-300">...</div>

In this case, the element will be pink on mobile, and then progressively get overridden to become blue at the sm breakpoint and wider, purple at the md breakpoint and wider, etc... all the way to become green when larger than the xl breakpoint.

In other words, larger breakpoint prefixes will override values defined for smaller breakpoints. xl will always override lg, which itself will override md.

while i useing lg or xl breackpont then md not working :(

The md point is not working because lg and xl override it. You need to do the opposite: use your default styles on md (or unprefixed), and then override that with lg and xl.

Hope it helps!

[PabloRiv]

This does not work for me. All of my utility classes work except for the breakpoints and arbitrary values. This is my config file:
module.exports = { mode: 'aot', purge: { enabled: false, content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'] }, presets: [], darkMode: false, // or 'media' or 'class' theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', },

and this is my html:
<div class="grid h-10 grid-cols-7 grid-rows-1 sm:h-12 md:h-14 lg:h-16 xl:h-18 header ">

only the h-10 works.
I have also checked:

1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> which I have
2. order of breakpoints is from smallest to largest

Any ideas what I am missing?

[andrew-arkhipov]

@PabloRiv did you ever get an answer for this? One of our users is experiencing this same issue.