Creating a Tailwind CSS sample site with XM Cloud - Part 6 Applying Tailwind CSS to Next.js : Haramizu.com

Creating a Tailwind CSS sample site with XM Cloud - Part 6 Applying Tailwind CSS to Next.js

Published: 2024-06-28

Since the samples provided in the Starter Kit are created using Bootstrap 5, we will rewrite the Next.js samples to use Tailwind CSS.

Installing Tailwind CSS in Next.js

Instructions for installing Tailwind CSS are provided on the following page.

Install Tailwind CSS with Next.js

Execute the following code against the actual Headless SXA project provided by JSS, following the instructions.

PowerShell

cd src\tailwindcss
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The created file src\tailwindcss\tailwind.config.js specifies the target file for content.

JSON

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

Create the file src\tailwindcss\src\assets\globals.css as a style sheet for Tailwind CSS and set the following code

CSS

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

Finally, src\tailwindcss\src\pages\_app.tsx reads the stylesheet, so the following code should be removed

TypeScript

import 'assets/main.scss';

Add the following code instead

TypeScript

import 'assets/globals.css';

Remove Bootstrap code

We will delete the unused Bootstrap code. The files to be deleted are as follows

src\tailwindcss\src\assets\main.scss
src\tailwindcss\src\assets\sass and all sub-folders
src\tailwindcss\src\assets\basic and all sub-folders

Finally, remove the bootstrap package.

PowerShell

npm uninstall bootstrap

You can now remove Bootstrap from the project.

Adding styles for use in Pages

We will add a few stylesheets to allow the existing Headless SXA components and the edit-as-you-view in Pages to work together.

First, add the following code as safelist in the file tailwind.config.js so that the style used by Column Splitter is available by default.

JavaScript

/** @type {import('tailwindcss').Config} */
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: /hidden/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /block/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
  ],
  theme: {
    extend: {},
  },

Finally, finish loading all style sheets in the globals.css file.

CSS

@import './app.css';

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

/* Pages Style - Common */
@import './common/alignment.css';
@import './common/spacing.css';

/* Components */
@import './components/Image.css';
@import './components/ColumnSplitter.css';
@import './components/RichText.css';

The style sheet code is shared on GitHub, so please use the data under the following path

https://github.com/haramizu/sitecoredemo-jp/tree/part-6/src/tailwindcss/src/assets

CSS Nesting plugin

This alone will actually result in a warning about CSS nesting. To work around this, rewrite the settings in postcss.config.js as follows. The only thing we are adding is the nesting part.

JavaScript

module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Operation check

Now, as an actual operation check, we will describe the contents using a rich text editor. In the rich text editor, create contents assuming the following HTML is written.

HTML

<h1>Heading 1</h1>
<p>Paragraph</p>
<h2>Heading 2</h2>
<p>Paragraph</p>

We have confirmed that the above styles are displayed with the text definitions listed in src\tailwindcss\src\assets\components\RichText.css

Summary

In order to use Tailwind CSS instead of Bootstrap, which is provided as a sample, we were able to display the site with Tailwind CSS by replacing the style sheet and applying the styles used in the individual components.