CSS with Headless SXA and XM Cloud

When you start building with Headless SXA in XM Cloud, one of the first front-end decisions you’ll make is a strangely basic one:

How the heck are we going to handle CSS?

While it’s arguable if there’s a “best” answer, there is a right answer for your use case. Let’s walk through the typical modern CSS approaches and how they fit into the SXA world.

Some modern CSS Approaches

Plain ol’ CSS (or Sass)

The classic approach. Globally scoped stylesheets, easy to include frameworks like Bootstrap, and instantly familiar to most developers.

✅ Fast and easy to start with
⚠️ Global scope means you have to watch for style conflicts

CSS-in-JS

Scoped styles that live right alongside your component code. Works right out of the box with Next.js (styled-jsx).

✅ No naming collisions
⚠️ Can feel cramped if you’re writing a lot of CSS.

CSS Modules

Scoped styles in their own files, supports Sass features, and integrates nicely with Next.js.

✅ Clear separation with safe scoping
⚠️ Slightly more setup with imports

Tailwind CSS

Utility-first CSS framework that speeds up layout work once you learn it.

✅ Predictable, consistent, minimal
⚠️ Lonnnnnng class lists can hurt readability and arguable reusability

SXA Grids

Headless SXA gives you flexibility but still centers layouts around a grid system. The built-in grid options in XM Cloud are:

  • Bootstrap 5, 4, or 3
  • Foundation
  • Grid 960
  • Tailwind

You can use one of these defaults or build your own. But beware, a custom SXA grid is not for the faint of heart - you would have to create a whopping 294 Sitecore items to support the classes. That’s a serious commitment for initial development and maintenance.

Performance through Tree Shaking

Whatever CSS approach you choose, make sure you’re tree shaking—removing unused rules from your final build so you only ship what’s needed.

If you’re using the CSS files in the SXA themes:

  • Full Bootstrap 5 CSS: ~223 KB
  • Full Tailwind CSS: ~759k 😱
  • Tailwind grid-only CSS: only 21 KB!!

By keeping just the grid classes and removing everything else, we get all of the responsive layouts and grid management in SXA without the weight.

In summary…

  • Choose the CSS method that best matches your team’s skills but lean towards modernizing when possible.
  • Use SXA’s grid, but don’t pull in an entire framework if you don’t need it.
  • Tree shake aggressively to maximize performance.
  • If you’re using Tailwind, consider a grid-only config (find it here)