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ループ
Reusing Styles - Tailwind CSS
Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it. But of course as a project grows, you'll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.
tailwindcss.com
@applyを用いてクラス抽出を行う（おすすめ）
おすすめなのは@applyを用いてクラス抽出を行う方法。
Reusing Styles - Tailwind CSS
Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it. But of course as a project grows, you'll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.
tailwindcss.com
ディレクティブを設定した 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 についての詳細は下記。
Functions & Directives - Tailwind CSS
Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects. Use the @tailwind directive to insert Tailwind's base, components, utilities and variants styles into your CSS. Use the @layer directive to tell Tailwind which "bucket" a set of custom styles belong to.
tailwindcss.com
クラス名ではなく直接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;
}
}Adding Custom Styles - Tailwind CSS
Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you. Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework.
tailwindcss.com
ブレイクポイントのスクリーンサイズをカスタマイズ
Customizing Screens - Tailwind CSS
You define your project's breakpoints in the theme.screens section of your tailwind.config.js file. The keys become your responsive modifiers (like md:text-center), and the values are the min-width where that breakpoint should start. The default breakpoints are inspired by common device resolutions: Feel free to have as few or as many screens as you want, naming them in whatever way you'd prefer for your project.
tailwindcss.com
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: [],
};自分で設定したカラーと独自カラーを追加
自分で命名したカラー名で、任意のカラーを追加することができます。
Customizing Colors - Tailwind CSS
Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don't have your own specific branding in mind.
tailwindcss.com
下記は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”を利用するものとなっており、そのプラグインを利用しないと意図したデザインを実現することができません。
Plugins - Tailwind CSS
Extending Tailwind with reusable third-party plugins.
tailwindcss.com
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: 勉強・学習
