Tailwind CSS を利用している際には、Next.js に記載されていないスタイルに関しては build のタイミングで対象外となるため、CMS の変数として利用できるように tailwind.config.js に一部定義を追加する必要があります。
今回はこの手順を、コンテナの背景を利用して紹介をします。
コンテナの背景の設定
コンポーネントの背景を指定する際には、Pages では以下の項目が用意されています。
この背景色の項目は、サイトで利用するスタイルで定義するようになっています。値に関しては以下のように記載されています。
今回はここに、bg-blue-800 という値を指定します。結果として、スタイルシートとしてコンテナに対して適用されていますが、色が反映されていません。
tailwind.config.js で背景色を有効にする
今回は CMS の値として設定をしているため、Next.js のコードに含まれていないため bg- のスタイルが有効になっていないため色が反映されていない状況となります。
そこで、tailwind.config.js に対して、salelist に bg- を追加してください。
JavaScript
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: /bg-/,
},これで bg- と記載されたスタイルに関して有効になります。Pages で配置していた背景色のあるコンテナに関して、青い色が適用されているのが分かります。
実際に、テキストを配置すると色が正しく反映されています。
ブランドの色を適用したい
Tailwind CSS で定義されている色以外のものをコンテナの背景色として利用したい場合、まず色の定義を tailwind.config.js に追加する必要があります。今回は色の名前を customBlue として以下の色を設定します。
JavaScript
theme: {
extend: {
colors: {
customBlue: 'rgb(0, 79, 155)',
},
},
},この色を適用する際には、先ほどの Color background で定義している名前を、bg-customBlue の値を指定します。結果、以下のようにカスタムの色を適用することができました。
上の例では、まだ色の違いが分かりにくいかもしれませんが、カスタムの背景色の設定をすることができました。
まとめ
今回はコンテナの背景に対して、スタイルを適用して色を変更することができました。このスタイルの定義を Sitecore のアイテムとして持つことができるようにしておくことで、コンポーネントに色に関して埋め込むのではなく、場所によって色を変えるなどの運用がやりやすくなります。