XM Cloud で Tailwind CSS のサンプルサイトを作成 - その６ Next.js に Tailwind CSS を適用する : Haramizu.com

XM Cloud で Tailwind CSS のサンプルサイトを作成 - その６ Next.js に Tailwind CSS を適用する

XM Cloud Headless SXA

公開日: 2024-06-28

Starter Kit で用意されているサンプルは Bootstrap 5 で作成されているため、今回は Tailwind CSS を利用できるように Next.js のサンプルを書き換えていきます。

Next.js に Tailwind CSS をインストールする

Tailwind CSS をインストールする手順に関しては、以下のページで提供されています。

Install Tailwind CSS with Next.js

実際に JSS で提供されている Headless SXA のプロジェクトに対して、手順に沿って以下のコードを実行します。

PowerShell

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

作成された src\tailwindcss\tailwind.config.js のファイルは content に対して対象のファイルを指定します。

JSON

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

Tailwind CSS のスタイルシートとして、src\tailwindcss\src\assets\globals.css のファイルを作成して、以下のコードを設定します。

CSS

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

最後に、src\tailwindcss\src\pages\_app.tsx がスタイルシートを読み込んでいるため、以下のコードを削除します。

TypeScript

import 'assets/main.scss';

代わりに以下のコードを追加します。

TypeScript

import 'assets/globals.css';

Bootstrap のコードを削除する

利用しない Bootstrap のコードを削除していきます。削除するファイルは以下の通りです。

src\tailwindcss\src\assets\main.scss
src\tailwindcss\src\assets\sass フォルダすべて
src\tailwindcss\src\assets\basic フォルダすべて

最後に、bootstrap のパッケージを削除します。

PowerShell

npm uninstall bootstrap

これでプロジェクトから Bootstrap を削除することができました。

Pages で利用する項目の追加

既存の Headless SXA のコンポーネントおよび Pages での見たまま編集が連携できるようにするために、いくつかスタイルシートを追加していきます。

まず Column Splitter が利用するスタイルをデフォルトで利用できるように、tailwind.config.js のファイルで safelist として以下のコードを追加します。

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: {},
  },

最後に globals.css ファイルですべてのスタイルシートを読み込むように仕上げます。

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';

スタイルシートのコードは、GitHub で共有しているので、以下のパスの配下のデータを利用してください。

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

Nested CSS 対策

これだけでは、実はCSS nesting に関しての警告が表示されます。これを回避するためには、postcss.config.js の設定を以下のように書き換えます。追加しているのは nesting の部分です。

JavaScript

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

動作確認

それでは実際に動作確認として、リッチテキストエディタでコンテンツを記述します。リッチテキストエディタでは、以下の HTML が記述されることを想定してコンテンツを作成します。

HTML

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

上記のスタイルは src\tailwindcss\src\assets\components\RichText.css に記載されている文字の定義で表示されていることを確認できました。

まとめ

サンプルとして提供されている Bootstrap ではなく、Tailwind CSS を利用するために、スタイルシートに関しての入れ替え、また個別のコンポーネントで利用するスタイルを適用することで、Tailwind CSS で表示することができました。