Tailwind Logo

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

XM Cloud

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.

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

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>
create-tailwindcss-sample-29.png

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.

Related article

Tags