Tailwind Configuration for Headless SXA and Sitecore XM Cloud

In a previous blog post, I laid out some options for CSS when using Headless SXA and XM Cloud. This blog post will cover how the details around how to use the Tailwind configuration found here to include all of the grid-related classes when Tailwind does its tree-shaking.

Enable Tailwind in your SXA site

When creating your site in XM Cloud or SXA, choose Tailwind in the grid settings. For existing sites, go to Site Settings → Grid Mapping and switch to Tailwind. This ensures SXA applies the right classes to its grid markup. You want to do this before you start your buildout as all of the class names are saved as strings in rendering parameters for your components and you’ll need to edit every component of every page (or script it) to update the rendering parameters.

Use the following safelist configuration in your tailwind.config.js file:

module.exports = {
  // only safelist the classes needed for Sitecore grid usage
  safelist: [
    {
      pattern: /^basis-./,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^grow$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^order-./,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(hidden|inline|inline-block|block)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(table|table-row|table-cell)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(flex|inline-flex)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(ml|mr)-0$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^(ml|mr|mx)-auto$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /^self-(center|end|start)$/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
  ],
};

Add missing Tailwind classes

The SXA Tailwind theme includes a handful of classes that are not covered by Tailwind by default and will need to be added as a separate CSS class. Add the following CSS class file to be compiled by Tailwind:

@tailwind utilities;

.offset-0 {
  margin-left: 0;
}

.offset-1 {
  margin-left: 8.33333%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.offset-11 {
  margin-left: 91.66667%;
}

@media (width >= 640px) {
  .sm\:offset-0 {
    margin-left: 0;
  }

  .sm\:offset-1 {
    margin-left: 8.33333%;
  }

  .sm\:offset-2 {
    margin-left: 16.66667%;
  }

  .sm\:offset-3 {
    margin-left: 25%;
  }

  .sm\:offset-4 {
    margin-left: 33.33333%;
  }

  .sm\:offset-5 {
    margin-left: 41.66667%;
  }

  .sm\:offset-6 {
    margin-left: 50%;
  }

  .sm\:offset-7 {
    margin-left: 58.33333%;
  }

  .sm\:offset-8 {
    margin-left: 66.66667%;
  }

  .sm\:offset-9 {
    margin-left: 75%;
  }

  .sm\:offset-10 {
    margin-left: 83.33333%;
  }

  .sm\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 768px) {
  .md\:offset-0 {
    margin-left: 0;
  }

  .md\:offset-1 {
    margin-left: 8.33333%;
  }

  .md\:offset-2 {
    margin-left: 16.66667%;
  }

  .md\:offset-3 {
    margin-left: 25%;
  }

  .md\:offset-4 {
    margin-left: 33.33333%;
  }

  .md\:offset-5 {
    margin-left: 41.66667%;
  }

  .md\:offset-6 {
    margin-left: 50%;
  }

  .md\:offset-7 {
    margin-left: 58.33333%;
  }

  .md\:offset-8 {
    margin-left: 66.66667%;
  }

  .md\:offset-9 {
    margin-left: 75%;
  }

  .md\:offset-10 {
    margin-left: 83.33333%;
  }

  .md\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 1024px) {
  .lg\:offset-0 {
    margin-left: 0;
  }

  .lg\:offset-1 {
    margin-left: 8.33333%;
  }

  .lg\:offset-2 {
    margin-left: 16.66667%;
  }

  .lg\:offset-3 {
    margin-left: 25%;
  }

  .lg\:offset-4 {
    margin-left: 33.33333%;
  }

  .lg\:offset-5 {
    margin-left: 41.66667%;
  }

  .lg\:offset-6 {
    margin-left: 50%;
  }

  .lg\:offset-7 {
    margin-left: 58.33333%;
  }

  .lg\:offset-8 {
    margin-left: 66.66667%;
  }

  .lg\:offset-9 {
    margin-left: 75%;
  }

  .lg\:offset-10 {
    margin-left: 83.33333%;
  }

  .lg\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 1280px) {
  .xl\:offset-0 {
    margin-left: 0;
  }

  .xl\:offset-1 {
    margin-left: 8.33333%;
  }

  .xl\:offset-2 {
    margin-left: 16.66667%;
  }

  .xl\:offset-3 {
    margin-left: 25%;
  }

  .xl\:offset-4 {
    margin-left: 33.33333%;
  }

  .xl\:offset-5 {
    margin-left: 41.66667%;
  }

  .xl\:offset-6 {
    margin-left: 50%;
  }

  .xl\:offset-7 {
    margin-left: 58.33333%;
  }

  .xl\:offset-8 {
    margin-left: 66.66667%;
  }

  .xl\:offset-9 {
    margin-left: 75%;
  }

  .xl\:offset-10 {
    margin-left: 83.33333%;
  }

  .xl\:offset-11 {
    margin-left: 91.66667%;
  }
}

@media (width >= 1536px) {
  .\32xl\:offset-0 {
    margin-left: 0;
  }

  .\32xl\:offset-1 {
    margin-left: 8.33333%;
  }

  .\32xl\:offset-2 {
    margin-left: 16.66667%;
  }

  .\32xl\:offset-3 {
    margin-left: 25%;
  }

  .\32xl\:offset-4 {
    margin-left: 33.33333%;
  }

  .\32xl\:offset-5 {
    margin-left: 41.66667%;
  }

  .\32xl\:offset-6 {
    margin-left: 50%;
  }

  .\32xl\:offset-7 {
    margin-left: 58.33333%;
  }

  .\32xl\:offset-8 {
    margin-left: 66.66667%;
  }

  .\32xl\:offset-9 {
    margin-left: 75%;
  }

  .\32xl\:offset-10 {
    margin-left: 83.33333%;
  }

  .\32xl\:offset-11 {
    margin-left: 91.66667%;
  }
}

Build your project

Now when you build your project, you should have all of these styles (including the ones in the extra CSS file) in your final output. Ensure that the classes in your safelist have been emitted.