Introduction

When you spin up a new Sitecore Headless project, you’ll quickly notice that the default rendering styles and components are geared towards Bootstrap. While this works, it’s not always the cleanest or most flexible solution—especially if your team prefers Tailwind CSS for modern utility-first styling.

One common example is the Column Splitter component. Out of the box, it’s tied to Bootstrap’s grid system, which can feel heavy and less intuitive if you’re working with Tailwind. In this post, I’ll walk you through setting up Tailwind in Sitecore Headless and then show you how to build a simpler, cleaner Column Splitter component.

Setting up Tailwind in Sitecore Headless

If you created your project with the @sitecore-jss/sitecore-jss-nextjs starter, adding Tailwind is straightforward.

1. Install Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure tailwind.config.js

Point Tailwind at your components and pages:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Add Tailwind to your globals

Open ./src/styles/globals.css and add:

@tailwind base;
@tailwind components;
@tailwind utilities;

Restart your dev server, and Tailwind should now be working across your project.

3. Configure headless sites to use Tailwind

For more details on configuring Tailwind in Sitecore Headless, check out the official documentation

Replacing the Bootstrap Column Splitter

The default Sitecore Headless Column Splitter assumes Bootstrap classes. But with Tailwind, we can take a much simpler and more composable approach.

Here’s the custom ColumnSplitter component:

import {
  ComponentParams,
  ComponentRendering,
  Placeholder,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { clsx } from 'clsx';

interface ColumnSplitterProps {
  params: ComponentParams;
  rendering: ComponentRendering & { params: ComponentParams };
}

const ColumnSplitter = ({ params, rendering }: ColumnSplitterProps): JSX.Element => {
  const enabledPlaceholders = params.EnabledPlaceholders.split(',');
  const childrenCount = enabledPlaceholders.length;
  const id = params.RenderingIdentifier || undefined;
  const styles = params.Styles;

  return (
    <section className={clsx(styles ?? styles)} id={id}>
      <div
        className={clsx(
          'container grid max-w-[1062px] gap-6',
          childrenCount === 2 && 'md:grid-cols-2',
          childrenCount === 3 && 'md:grid-cols-3',
          childrenCount === 4 && 'md:grid-cols-4',
        )}
      >
        {enabledPlaceholders.map((ph) => (
          <div className="grid gap-3 md:gap-6" key={ph}>
            <Placeholder name={`column-${ph}-{*}`} rendering={rendering} key={ph} />
          </div>
        ))}
      </div>
    </section>
  );
};

export default ColumnSplitter;

Visual Comparison

Here’s a simple representation of how the layout looks:

Tailwind (2 columns)

Tailwind (3 columns)

Tailwind (4 columns)

This simple grid visualization makes it easy to see how Tailwind handles scaling with fewer or more placeholders.

How this works

• Dynamic columns → Instead of hardcoding Bootstrap column classes, we check how many placeholders are enabled and apply Tailwind’s responsive grid utilities (md:grid-cols-2, md:grid-cols-3, etc.).
• Container & spacing → Tailwind’s container, gap-6, and max-w-[1062px] provide clean spacing and consistent layouts.
• Scalable placeholders → Each column maps to a Sitecore placeholder, so authors can still drag-and-drop components without worrying about CSS.

Benefits over Bootstrap

• No dependency on Bootstrap → Smaller bundle, modern utility classes.
• Consistent design → Aligns with the rest of your Tailwind-based design system.
• Flexibility → Adding new column configs is as easy as extending the conditional classes.

Wrapping up

With Tailwind set up in Sitecore Headless, you can replace Bootstrap-heavy markup with cleaner, more maintainable components. This Column Splitter is a small but powerful example of how Tailwind’s grid utilities simplify layout logic.

• Tailwind integrated into Sitecore Headless.
• Cleaner Column Splitter implementation.
• Future-friendly, Bootstrap-free setup.