🐥

[2023年6月版]Astro.js 小ネタ集その4 Tailwind CSSのテーマ拡張とかSVGとか

2023/06/11に公開

個人開発

前回に引き続きAstro.jsでの小ネタを紹介していきます。

1. TailWind CSSにTwitter色を追加

サイトの"Twitterにシェア"機能の実装でSVGのアイコンなど設置してみましたが、ついでに Tailwind にTiwtterのアイコンカラーを追加して、いろいろ使えるようにしてみたいと思います。

tailwindの設定ファイルに以下のように追加するだけです。

tailwind.config.cjs

module.exports = {
  ...
	theme: {
    ...
		extend: {
			colors: {
				twitter: '#1DA1F2',
			},
		},
	},
  ...
}

themeの直下に colors を追加すると今のテーマを丸ごと上書きしてしまうので、extends の下に colors を入れています。

ついでに、Github Copilotを有効にしていると、このカラーの#1DA1F2、自動で出てきます。
さらにこの下の行で f と打つと、facebook: '#3B5998',が補完候補に挙がってきます。
有名どころのSNSやWebサービスの頭文字を入れるとそのサービスが補完校に挙がってきます…

tailwind.config.cjs

module.exports = {
  ...
	theme: {
    ...
		extend: {
			colors: {
				airbnb: '#FF5A5F',
				google: '#4285F4',
				twitter: '#1DA1F2',
				facebook: '#3B5998',
				instagram: '#E1306C',
				linkedin: '#2867B2',
				github: '#333',
				whatsapp: '#25D366',
				telegram: '#0088cc',
				medium: '#00ab6c',
				youtube: '#FF0000',
			},
		},
	},
  ...
}

こんな感じでガンガンにサービスとアイコンカラーが補完されていきます。
めっちゃ便利です。
アイコンカラー追加しおくと、Tailwindのイベントと組み合わせアイコンカラーが使えるのでいろいろ便利です。

っていうか Github Copilot スゴイ。

2. SVGの色をTailwind CSSで指定

SVGではfill属性を使えばSVGの塗りがTailwindで指定できます。^[1]

上記で追加した Twitterのアイコンカラーですが本サイトでは以下のように使用してます。

TwitterIcon.astro

    <svg
        xmlns="http://www.w3.org/2000/svg"
        class=" fill-white hover:fill-twitter"
        viewBox="0 0 30 30">
        <path ... />
    </svg>

これでSVGでアイコンを描画するだけど、基本は白塗り、マウスオーバーでツイッターカラーに塗る、をやってます。

このように、SVGの色付けもTailwind CSSから制御可能です。

3. Style タグに変数を渡して Tailwind CSSをバリアブル(可変)にする

いろいろコンポーネントを作っていくと、ピンポイントで前景色と背景色を変えたいとか入れ替えたいとか出てきます。

そんな時は、Astro.js の props と CSS の変数を組み合わせてコンポーネントの属性としてCSSに値を渡すことができます。

本サイトでは記事の目次エリアをPC版とモバイル版で色を切り替えてます。
たとえば、以下のようにしてます。

---
import type { MarkdownHeading } from 'astro';

export interface Props {
    headings: MarkdownHeading[];
    fgColor : string;
    bgColor : string;
}

const { headings, fgColor, bgColor } = Astro.props;
---

<style define:vars={{ fgColor, bgColor }}>
@tailwind components;

@layer components {
    ...
    .toc-level-0::before {
        @apply bg-[var(--fgColor)] rounded-full content-[''];
    }

    .toc-level-0 > li::before {
        @apply bg-[var(--fgColor)];
        border: 2px solid var(--bgColor);
    }
    .toc-level-0 > li.toc-level-3::before {
        @apply bg-[var(--fgColor)];
        border: 2px solid var(--bgColor);
    }
    ...
}
</style>

手順としては、

interface Propsでコンポーネントのプロパティで受け取る設定値の入り口を定義します。
const { ... } = Astro.props; でAstroのコンポーネントとして設定値を受け取ります。
<style define:vars={{ ... }}> で 変数名 定義してます。これだけで Astroコンポーネントのプロパティ値も渡されてます。
CSSの値には var(--{変数名}) で指定します。
TailWind CSS のクラスには bg-[var(--変数名)] で指定します。

Tailwind のクラス名ではカスタム値の [] を使って変数で渡した値を有効にしてます。

これでAstoコンポーネントの属性値でCSSの設定を指定することができます。

本日はここまでといたします。
引き続きよろしくお願いいたします。

脚注

https://tailwindcss.com/docs/fill ↩︎

1. TailWind CSSにTwitter色を追加

2. SVGの色をTailwind CSSで指定

3. Style タグに変数を渡して Tailwind CSSをバリアブル(可変)にする

Discussion