tailwindcss カスタマイズ
Tailwind CSSのインストールが完了しておおよその使い方がわかってくると、「何度も利用するスタイルを使い回せるようにしたい」「外部フォント読み込みや、独自カラーを割り当てたい」などのやりたいことが出てきます。
本記事では、下記の項目について説明していきます。
- Tailwindクラスの再利用スタイル
- CSSスタイル名にTailwindクラスを割り当てる
- ブレイクポイントのpxカスタマイズ
- 独自カラーの追加
- 外部フォント読み込み
目次:
- 同一のTailwindクラス名を使い回す: 再利用スタイルについて
- 簡易的な回避策
- @applyを用いてクラス抽出を行う(おすすめ)
- クラス名ではなく直接CSSスタイル名にTailwindデフォルトクラスを割り当てたい場合
- コンポーネントとしてインクルードされたスタイルをカスタマイズする場合
- ブレイクポイントのスクリーンサイズをカスタマイズ
- 自分で設定したカラーと独自カラーを追加
- 外部フォントを読み込みTailwindCSSクラスのフォントとして利用できるように
- GoogleフォントをCDNから参照する
- Tailwind設定ファイルにフォント設定を追加
- TailwindCSSプラグインを導入する
- TailwindCSSプラグインをnpmでインストールする
- TailwndCSS設定ファイルに追加プラグイン設定を記述する
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
同一のTailwindクラス名を使い回す: 再利用スタイルについて
同じ複数のTailwindクラス名を割り当てることが何度もある場合など、複数の同一クラス名を使いまわしたい場合にどうするか?について。
簡易的な回避策
TailwindCSS公式Docsでは簡易的な方法として、次の方法が説明されています。
- マルチカーソルで力技
- CSSループ
@applyを用いてクラス抽出を行う(おすすめ)
おすすめなのは@applyを用いてクラス抽出を行う方法。
ディレクティブを設定した src/input.cssに下記のように抽出クラスを記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
上記を適用させるHTMLは下記になります。
<button class="btn-primary">
Save changes
</button>
CSSに記述する @layer components についての詳細は下記。
クラス名ではなく直接CSSスタイル名にTailwindデフォルトクラスを割り当てたい場合
クラス名ではなく直接CSSスタイル名にTailwindデフォルトクラスを割り当てたい場合、ディレクティブを記述しているsrc/input.cssに下記のように @layer base と記載して、その中にCSSスタイル名に割り当てるTailwindクラス名を記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
コンポーネントとしてインクルードされたスタイルをカスタマイズする場合
たとえば .btn-blue クラスとして利用しているコンポーネントをカスタマイズする場合には、下記のように @layer componentsと記述して、その中で該当クラスのカスタマイズを行います。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
ブレイクポイントのスクリーンサイズをカスタマイズ
tailwind設定ファイル(tailwind.config.js)のtheme設定に、下記のようにscreens属性を記述します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
screens: {
sm: "480px",
md: "765px",
lg: "976px",
xl: "1440px",
},
extend: {
},
plugins: [],
};
自分で設定したカラーと独自カラーを追加
自分で命名したカラー名で、任意のカラーを追加することができます。
下記はHSLでカラーを指定し、命名した例。HEXやRGBAでも指定が可能です。
theme拡張設定として記述。(theme > extend )
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
},
extend: {
colors: {
strongCyan: "hsl(171, 66%, 44%)",
lightBlue: "hsl(233, 100%, 69%)",
darkGrayishBlue: "hsl(210, 10%, 33%)",
grayishBlue: "hsl(201, 11%, 66%)",
},
},
plugins: [],
};
このように記述することで、フォントカラーや背景色としてTailwindクラスとして利用可能です。
<h3 class="text-darkGrayishBlue">
Text-Color: DarkGrayishBlue
</h3>
<a href="#" class="bg-strongCyan">Background Color: StrongCyan</a>
外部フォントを読み込みTailwindCSSクラスのフォントとして利用できるように
TailwindCSSデフォルトのフォントとは異なるフォントを設定することが可能です。
CDN経由でGoogleフォントを読み込み、そのフォントをTailwindで利用するフォントとして適用させる方法を紹介します。
GoogleフォントをCDNから参照する
まず、外部フォントを利用したいHTMLファイル内にlinkタグとしてCDNインポートの参照を記述します。
<head>
...
<link rel="stylesheet" href="./dist/output.css" />
<!-- Google Fonts Bai -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap"
rel="stylesheet"
/>
<title> Document </title>
</head>
Tailwind設定ファイルにフォント設定を追加
次に、Tailwind設定ファイルで適用させるフォントクラス名を指定します。
sansフォントを指定した際に、読み込んだGoogleフォントを適用させるようTailwind設定file内に記述します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
},
extend: {
colors: {
strongCyan: "hsl(171, 66%, 44%)",
lightBlue: "hsl(233, 100%, 69%)",
darkGrayishBlue: "hsl(210, 10%, 33%)",
grayishBlue: "hsl(201, 11%, 66%)",
},
},
fontFamily: {
sans: ["Bai Jamjuree", "sans-serif"],
},
},
plugins: [],
};
TailwindCSSプラグインを導入する
TailwindCSSを利用した公式のUIコンポーネントライブラリ”TailwindUI”のコンポーネントでは、いくつかのコンポーネントで下記のような記述が見られます。
<!--
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/aspect-ratio'),
],
}
```
-->
これは該当のUIコンポーネントがTailwindCSSプラグインの”@tailwindcss/aspect-ratio”を利用するものとなっており、そのプラグインを利用しないと意図したデザインを実現することができません。
TailwindCSSプラグインの追加は、npmインストールとTailwindCSS設定ファイルへの記述という2ステップで完了します。
TailwindCSSプラグインをnpmでインストールする
例としたUIコンポーネントが必要とする”@tailwindcss/aspect-ratio”をnpmでインストールします。
$ npm install --save-dev @tailwindcss/aspect-ratio
このaspect-ratioというプラグインですが、似た名前の”tailwindcss-aspect-ratio”というプラグインもあるので注意が必要です。tailwindcssフォルダ直下にインストールさせる”@tailwindcss/aspect-ratio”を指定しましょう。
TailwndCSS設定ファイルに追加プラグイン設定を記述する
npmによるインストールが完了したら、TailwindCSS設定ファイルであるtailwind.config.jsに追加したプラグインを記述します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
// ここにプラグインを記述
plugins: [require("@tailwindcss/aspect-ratio")],
};
複数プラグインをインストールした場合には、リスト形式で記述しましょう。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
🍀 Webサイト制作とSEOの専門家 - Marketing Wizard
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
この記事の気になった箇所を読み返す:
- 同一のTailwindクラス名を使い回す: 再利用スタイルについて
- 簡易的な回避策
- @applyを用いてクラス抽出を行う(おすすめ)
- クラス名ではなく直接CSSスタイル名にTailwindデフォルトクラスを割り当てたい場合
- コンポーネントとしてインクルードされたスタイルをカスタマイズする場合
- ブレイクポイントのスクリーンサイズをカスタマイズ
- 自分で設定したカラーと独自カラーを追加
- 外部フォントを読み込みTailwindCSSクラスのフォントとして利用できるように
- GoogleフォントをCDNから参照する
- Tailwind設定ファイルにフォント設定を追加
- TailwindCSSプラグインを導入する
- TailwindCSSプラグインをnpmでインストールする
- TailwndCSS設定ファイルに追加プラグイン設定を記述する
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Category: 開発・プログラミング | エンジニアリング
Tags: 勉強・学習