💭
Tailwind CSSのカスタマイズでよくやること
tailwindcss 3.0.23で検証
カラーテーマを追加する
tailwindではbg-whiteで背景色を白、text-whiteで白テキストなどにできるが、whiteの部分で自分の決めたカラーを使えるようにする
tailwind.config.js
module.exports = {
・・・
theme: {
extend: {
colors: {
"foo": "#f97316",
"bar": {
"buz": "#65C18C",
・・・
},
},
},
},
・・・
}
背景カラーfoo、テキストカラーbar-buzを指定できるようになる
html
<div class="bg-foo text-bar-buz"> ・・・</div>
カスタムフォントを使用する
fontファイル読み込む
html
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet" />
またはcssで読み込み
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
フォント名とフォントファミリーを指定
tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
fancy: ["Dancing Script"],
},
},
},
}
font-fancyが使えるようになる
html
<span class="font-fancy">・・・</span>
google fontsを追加する手順はこちらの記事が参考になる
クラスをまとめる
@applyでtailwindのクラスをまとめたクラスを作ることができる
css
.custom-btn {
@apply w-20 h-20 m-5 p5 text-center;
}
html
<button class="custom-btn">ボタン</button>
@layerで追加したスタイルの優先順位がきまる。この場合はbase < components < utilities
@layer base {
h1 { @apply text-2xl; }
}
@layer components {
h1 { @apply text-4xl; }
}
@layer utilities {
h1 { @apply text-5xl; }
}
これらの使い分けは、ドキュメントの翻訳したものを引用
base
特定のHTML要素に独自のデフォルトベーススタイルを追加したい場合は、@layerディレクティブを使用して、それらのスタイルをTailwindのベースレイヤーに追加してください。
components、 utilities
プロジェクトに追加する複雑なクラスで、ユーティリティクラスでオーバーライドできるようにしたい場合は、コンポーネント層を使用します。
ライト/ダークモードを切り替える
dark:でダークモードの場合のclassを指定
<div class="bg-white dark:bg-black">
・・・
</div>
ダークモードかどうかの判定方法
tailwind.config.js
module.exports = {
// darkクラスが指定された要素以下の要素がダークモードとして動作
darkMode: "class",
// os設定でダークモードを判定（デフォルト）
// darkMode: "media",
・・・
}
この場合、ダークモードとして動作する
<html class="dark">
・・・
<div class="bg-white dark:bg-black">
・・・
</div>
</html>
darkクラスを動的に追加・削除すればダークモードとライトモードの切り替えができる
テーマを切り替える
この例ではprimaryとprimary-textというカラーを作成
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
"primary": "var(--color-primary)",
"primary-text": "var(--color-primary-text)",
}
},
},
}
cssでカラーを設定
/* デフォルトテーマ */
:root {
--color-primary: #ffffff;
--color-primary-text: #000000;
}
/* 別のテーマ */
.custom-theme {
--color-primary: #000000;
--color-primary-text: #ffffff;
}
テーマのクラス名を指定して適用
<div class="custom-theme">
<button class="bg-primary text-primary-text">ボタン</button>
</div>
テーマのクラス名を動的にすれば、例えばユーザーごとにアプリのテーマを切り替えることができる
tailwind.config.jsで指定できる項目とデフォルト値
ここで確認できる
Discussion