Breakpoints question

[dixonge]

So, evidently, if I set a breakpoint for large (like lg:w-48) but do not set a breakpoint for mobile as a default (w-16) then the large breakpoint will take effect even for mobile view. Do I have that right? That is what I just figured out on my own, but didn't seem to find an explanation for in the docs.

Is this a result of not including the @import tailwindcss/base in my css ?

[adamwathan]

Nope that is not the case, see this demo:

https://jsfiddle.net/zLnyet31/

Can you share a reproduction of what you're seeing? I'm sure we can figure out what's happening 👍

[benface]

So, evidently, if I set a breakpoint for large (like lg:w-48) but do not set a breakpoint for mobile as a default (w-16) then the large breakpoint will take effect even for mobile view. Do I have that right?

No. If you have lg:w-48, w-48 will be applied on breakpoint lg and up.

Is this a result of not including the @import tailwindcss/base in my css ?

No, Preflight has nothing to do with variants / responsive utilities. The lg:w-48 class rule is defined like this in the CSS:

@media (min-width: 1024px) {
  .lg\:w-48 {
    width: 12rem;
  }
}

That rule is generated where @tailwind screens appears, or if you don't have that, it will be at the end of @tailwind utilities.

EDIT: Ninja'd by Adam. xD

[dixonge]

I was using lg:w-9/12 - this shows up in index.css in the appropriate @media section.

If used by itself, according to dev tools, even at 320px of screen width, the element width was 75%. Only when I also added w-full did the mobile view stretch out to a full 100% width.

I'm using this with eleventy, postcss, purgecss, etc. Hosting is Netlify.

I already fixed things by adding the default widths, but I set it back on my local dev long enough to grab a screenshot for you. As you can see, the only breakpoint setting that is struckthrough is one that has been over-ridden by specifying a default setting...

[adamwathan]

Maybe missing the necessary viewport meta tags to get the browser to interpret the dimensions correctly?

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[dixonge]

@adamwathan I had that but was missing the 'shrink-to-fit' part - so I added it, then removed one of the 'w-full' classes. All of the 'lg:' classes were still taking effect on mobile on that element.

The CSS that gets processed by postcss starts with:

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Is this not right?

[adamwathan]

Can you share a project that reproduces? Much easier to debug.

[florianbouvot]

Why some classes refer to index.css:... and others from (index):36 ?

[dixonge]

the project in question

[dixonge]

@florianbouvot I noticed that too, and I have no idea why

[adamwathan]

The problem is you have all these hard-coded styles in your head:

https://github.com/dixonge/vagabondians-11ty/blob/master/_includes/layouts/head.njk#L13

These styles contain a bunch of copies of the Tailwind breakpoint-specific utilities but with the media queries removed, causing the styles to be applied all the time.

This happened in this commit:

dixonge/vagabondians@9c2182f

...where you pasted those styles in yourself with no media queries, not sure where they came from.

[dixonge]

well crap! I did that as part of running through reported issues from Lighthouse testing - was trying to split out preload vs load later. Never occurred to me how badly this would work with Tailwind and purgecss. facepalm

[gerald525]

Good sample