Overriding CSS Resets For Page Specific Styling • Kwicherbelliaken Studio

The Problem

I initially set up my project with a CSS reset that applied a maximum width to the body element:

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4

5
@layer base {
6
  body {
7
    @apply ... max-w-3xl;
8
  }
9
}

This worked well for most pages, but created an issue on my landing page where I needed the content to span the full width.

Attempts

1. Overriding The Width Locally

This was a failed attempt. My first instinct was to override the max width in my landing page component:

1
<style>
2
  :global(body) {
3
    max-width: 100%;
4
  }
5
</style>

While this worked in my local development environment, it failed in production. The global stylesheet seemed to take precedence over my local styles, somewhat contradicting Astro’s documentation which states:

When conflicting styles are defined both globally and in a page’s local <style> tag, the local styles should overwrite any global styles. (But, there can be other factors involved, so always visually inspect your site to make sure your styles are properly applied!)

Add site wide styling

2. Conditional Styling Off HTML Attribute

This worked. It involved dynamically setting an HTML data attribute on the body element as high up in the page as possible. I did this in my base layout component.

1
---
2
const currentPath = Astro.url.pathname;
3
const isHomePage = currentPath === "/";
4
---
5

6
<body data-page={isHomePage ? "home" : "default"} />

Then in my global CSS, I modified the styling to apply the max-width to all pages except the home page:

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4

5
@layer base {
6
  body {
7
    @apply ... max-w-full;
8
  }
9

10
  /* Apply max-width to all pages except home/landing page */
11
  body:not([data-page="home"]) {
12
    @apply max-w-3xl;
13
  }
14
}