Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

Typhoon set width

Solved by pamtbaau View solution

Started by stuart young 7 days ago · 3 replies · 163 views
7 days ago

The default Typhoon width is too wide for my taste and despite several attempts to control this via the wrapper class in the the configuration I'm getting nowhere. I see this link from 4 years ago but following the suggested link isn't leading me to a solution. The defaults are

TXT
xl:container xl:mx-auto md:px-6 px-4

which gives a width of around 80% of my screen (1920x1080). I tried changing the xl to lg or md as per the Tailwind docs, but every change results in the full width being used which suggests to me that my syntax is wrong. I clearly don't understand what or how to change the default so that on a monitor I'm using only 50% of the screen width for example. Does anyone have any pointers?

last edited 08/08/26 by stuart young
7 days ago

The link you are referring to, it the link to the issues page of all Premium products. Owners of any Premium product are entitled to get free premium support by the developers of the products themselves.

From the issues page:

If you have a purchased a Grav Premium product and have an issue or question, please use the issue tracker here.

7 days ago

Thanks, the links are marginally different, enough for me at least to not get to the correct page. I will resubmit.

3 days ago Solution

Answer to issue on Github: https://github.com/getgrav/grav-premium-issues/issues/613

Your syntax wasn't the problem. Typhoon 4 is built on Tailwind 4 and ships a pre-compiled stylesheet, so only the classes the theme was actually built with exist in the CSS. xl:container is one of them (it caps content at \~1536px, about 80% of a 1920px screen), but lg:container, md:container and things like max-w-4xl were never generated, so they match nothing and the wrapper falls back to full width — exactly the "wider than the default" you saw.

For a narrower width with no tooling, set Wrapper Classes to:

TXT
max-w-(--breakpoint-xl) mx-auto md:px-6 px-4

That pins content to 1280px on any large screen. For an exact width like 50% of 1920, install the Custom CSS plugin, set Wrapper Classes to site-wrapper md:px-6 px-4, and add:

CSS
.site-wrapper { width: 100%; margin-inline: auto; }
@media (min-width: 1280px) { .site-wrapper { max-width: 960px; } }

On Grav 2.0 the nicer long-term option is the free Tailwind4 plugin (bin/gpm install tailwind4), which recompiles Typhoon's CSS with no Node needed — after that, any class you type (including max-w-[960px]) just works. I've also updated the field's help text so this limitation is spelled out.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Sebadamus, 2 weeks ago
5 249 1 week ago
Themes & Styling · by martynfoster735, 2 weeks ago
1 267 2 weeks ago
Themes & Styling · by Justin Young, 4 weeks ago
1 312 4 weeks ago
Themes & Styling · by Slebeig, 2 months ago
4 437 2 months ago
Themes & Styling · by Pedro M, 4 months ago
4 840 3 months ago