Tailwind Logo

Creating a Tailwind CSS sample site with XM Cloud - Part 7 Controlling container background color

XM CloudHeadless SXA

Published: 2024-09-11

When using Tailwind CSS, styles not listed in Next.js will not be covered at build time, so it is necessary to add some definitions to tailwind.config.js so that they can be used as CMS variables.

In this article, we will introduce this procedure using the container background.

Container Background Settings

When specifying the background of a component, Pages provides the following items

containerbg01.png

This background color item is to be defined by the style used on the site. As for the value, it is described as follows

containerbg02.png

This time, the value bg-blue-800 is specified here. The resulting style sheet is applied to the container, but the colors are not reflected.

containerbg03.png

Enable background color in tailwind.config.js

In this case, since the setting is made as a CMS value, it is not included in the Next.js code, so the bg- style is not enabled and the color is not reflected.

So, for tailwind.config.js, add bg- to the salelist.

JavaScript 
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  safelist: [
    'scChromeData',
    'scpm',
    '!px-0',
    {
      pattern: /basis-/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /text-/,
    },
    {
      pattern: /bg-/,
    },

This will take effect for styles marked bg-, and you will see the blue color applied to the container with the background color that was placed in Pages.

containerbg04.png

In fact, when the text is placed, the colors are reflected correctly.

containerbg05.png

I want to apply brand colors.

If you want to use a color other than those defined in the Tailwind CSS as the container background color, you must first add a color definition to tailwind.config.js. In this case, set the following color as customBlue.

JavaScript 
  theme: {
    extend: {
      colors: {
        customBlue: 'rgb(0, 79, 155)',
      },
    },
  },

When applying this color, specify the value of bg-customBlue as the name defined earlier in Color background. The result is the following custom color applied

containerbg06.png

In the example above, it may still be difficult to see the difference in color, but we were able to set a custom background color.

Summary

In this case, we were able to change the color of the container background by applying a style to it. Having this style definition as a Sitecore item makes it easier to change the color in different locations, rather than embedding the color in the component.

Tags