今回は Tailwind.css で利用される Flex を利用して横 Column Splitter （横に分割する）部分のコンポーネントに関して紹介をして行きます。

Column Splitter の動作

新しいプロジェクトに対して初めて Column Splitter を配置する際に、以下のように縦に並んでしまいます。縦に５つ並んでいるように見えますが、一番上は Header のところのエリア、一番下は Footer のエリアとなっており、中央の３つの部分は実際は Column Splitter のため横に並ぶ動作が正解です。

ここに RichText コンポーネントを配置して行きます。

それぞれのカラムに対して、3:6:3 でそれぞれ設定をしておきました。実際に表示されるコードを見ると以下のようになっています。

<div class="row component column-splitter basis-full">
  <div class="basis-1/4">
    <div class="row">
      <div class="component rich-text basis-full">
        <div class="component-content">
          <div>
            <span class="ck-content">
              <p>Sample Text 1</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="basis-1/2">
    <div class="row">
        <div class="component rich-text basis-full">
          <div class="component-content">
            <div>
             <span class="ck-content">
              <p>Sample Text 2</p>
            </span>
          </div>
       </div>
      </div>
    </div>
  </div>
  <div class="basis-1/4">
    <div class="row">
      <div class="component rich-text basis-full">
        <div class="component-content">
          <div>
            <span class="ck-content">
              <p>Sample Text 3</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tailwind.css として不足しているのは、flex が適用できていない点です。そこで、src/assets/components/ColumnSplitter/index.css というファイルを作成して以下の column-splitter に対して適用します。

.column-splitter {
  @apply flex;
}

そして作成したファイルを globals.css でインポートをすると有効になります。この際、表示は以下のようになります。

まだ正しく動作しません。これは Tailwind.css を利用する際に、コードに記載されていないスタイルシートは利用できない、という仕組みになっているためです。これを回避するためには、tailwind.config.js のファイルに salelist ととして basis- を登録します。

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

これで設定は完了です。実際の動作は以下のような形となっています。

これで Column Splitter が正しく動くようになりました。

まとめ

今回は Tailwind.css のタグが標準で動作しない場合の解決手順を紹介しました。この salelist を利用することで、サイトの Style などで Tailwind.css のスタイルをそのまま記述することも可能となります。