style-elements-across-nested-layouts-with-tailwind #174

timomeh · 2024-06-16T13:38:13Z

timomeh
Jun 16, 2024
Maintainer

cover_image: https://github.com/timomeh/timomeh.de/assets/4227520/5b9f737a-9dae-496b-abfe-19582adb8326

Style elements across nested layouts with Tailwind

Tailwind has this really useful group utility, that I recently discovered is super useful in frameworks with nested layouts.

You can use group to style any element based on any other element in the DOM. This may not seem like a big deal, but consider this example where we can hide the header if there's an element with the hide-header-signal class somewhere in the DOM.

<body class="group/body">
  <header class="group-has-[.hide-header-signal]/body:hidden">...</header>
  <main>
    <h1>Hello world</h1>
    <div class="hide-header-signal"></div>
  </main>
</body>

This uses the named group group/body to uniquely identify the group, in case we add more groups later.

You might think that you could just conditionally render the header to achieve the same thing, but that's not always easy to do, especially in frameworks with nested layouts and streaming responses, like Next.js.

Here's a real world example: This blog has a header on all pages, so the header can simply be in the root layout. But I also have two pages for visual regression testing of my syntax highlighting and markdown rendering, and I don't want to show the header on those pages, because the tests shouldn't fail when I change the header.

You don't have access to the current URL in the root layout, in order to conditionally hide the header based on the URL, unless you make the layout a client component – because of partial rendering and streaming.
You could also move the header into every page instead of the layout, and not include it in the pages where you don't want to show the header, but then you don't take advantage of your layouts.
You could create more nested folders with nested layouts, but you do it just for those two pages.

So although you could do a bunch of things to render the header dynamically for those pages, it has a comparatively high impact on our codebase. Sometimes this impact is justified and one of these approaches might be a better choice, but clearly not in this case where I just have some unlisted pages for testing purposes.

By using the pattern above, with our group utility friend, it's now super easy to hide the header on some pages:

// layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body className="group/body">
        <header className="group-has-[.hide-header-signal]/body:hidden">
          <Header />
        </header>
        {children}
      </body>
    </html>
  )
}

// e.g. regular blog post pages
// posts/[...slug]/page.tsx
export default function Page() {
  return (
    <main>
      <p>The header is visible on this page</p>
    </main>
  )
}

// e.g. pages for visual regression testing
// vrt/[...name]/page.tsx
export default function Page() {
  return (
    <main>
      <p>The header is hidden on this page</p>
      <div className="hide-header-signal" />
    </main>
  )
}

Done. A simple change which just added a few classes and affected 2 files, instead of changing a lot of code and affecting many files.

This example is only using the has-[.hide-header-signal] modifier, but it's not limited to only this modifier. You can do even more than to simply hide one element based on the existence of another element. For example, you could change the position of an element based on the data attribute of another element. Or change colors of the navigation – you know, sometimes websites are generally in light mode but then have some special pages where it's suddenly dark mode.

And the nice thing is: it's just CSS.

I guess these selectors are slow as hell, but get your shit together, browsers.

timomeh · 2024-06-17T08:01:26Z

timomeh Jun 17, 2024
Maintainer Author

lol, thanks ChatGPT

using react context makes no sense here and hiding it on a button click makes even less sense, but good to know that an LLM is still dumb enough

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style-elements-across-nested-layouts-with-tailwind #174

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

This comment was marked as spam.

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

style-elements-across-nested-layouts-with-tailwind #174

timomeh Jun 16, 2024 Maintainer

Style elements across nested layouts with Tailwind

Replies: 1 comment · 1 reply

This comment was marked as spam.

timomeh Jun 17, 2024 Maintainer Author

timomeh
Jun 16, 2024
Maintainer

Replies: 1 comment 1 reply

timomeh Jun 17, 2024
Maintainer Author