今回は Tailwind.css で利用される Flex を利用して横 Column Splitter （横に分割する）部分のコンポーネントに関して紹介をして行きます。
Column Splitter の動作
新しいプロジェクトに対して初めて Column Splitter を配置する際に、以下のように縦に並んでしまいます。縦に５つ並んでいるように見えますが、一番上は Header のところのエリア、一番下は Footer のエリアとなっており、中央の３つの部分は実際は Column Splitter のため横に並ぶ動作が正解です。
ここに RichText コンポーネントを配置して行きます。
それぞれのカラムに対して、3:6:3 でそれぞれ設定をしておきました。実際に表示されるコードを見ると以下のようになっています。
HTML
<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 に対して適用します。
CSS
.column-splitter {
@apply flex;
}そして作成したファイルを globals.css でインポートをすると有効になります。この際、表示は以下のようになります。
まだ正しく動作しません。これは Tailwind.css を利用する際に、コードに記載されていないスタイルシートは利用できない、という仕組みになっているためです。これを回避するためには、tailwind.config.js のファイルに salelist ととして basis- を登録します。
JavaScript
/** @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 のスタイルをそのまま記述することも可能となります。