✍️

Tailwind CSSで独自クラス（コンポーネント）を作成する

2022/01/23に公開1件

概要

Tailwind CSSを使っているとクラス名が多くなりすぎて、
どのパーツを示しているかパッと見分かりづらい・・

<div class="bg-blue-500 text-white font-bold py-2 px-4 rounded">

そこで一つのコンポーネントとして作成してあげ、クラス名をコンパクトにする

前提

Tailwind CSSが導入済みであること

実装

@tailwind各種スタイルをCSSに挿入し、
その中の@layerディレクティブ配下に独自クラスを定義する(今回だとbtn-blueクラス)
@applyディレクティブで、Tailwindで用意されている既存のユーティリティクラスを記述する

app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn-blue {
        @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    }
    .btn-blue:hover {
        @apply bg-blue-700;
    }
}

またVSCodeではデフォルトでcssのバリデーションが働くため、@tailwindや@layerが
unknownAtRulesに引っかかってしまうことがある。
それを回避するためsetting.jsonに以下の記述を行う

※ 検証を無効にしているだけなのでこれで良いのかわからない・・・

setting.json

{
    "scss.validate": false,
    "css.validate": false
}

設定は以上で、あとはビューで実際に定義したクラス名を記述するだけ！

<div class="btn-blue">
  <p>botann</p>
</div>

ボタン画像

独自クラスを作成する基準

複数回同じクラスを使用する時
クラス名が長くなりすぎてコンパクトにまとめたい時

上記2つが主な作成する基準的なものになると思うのですが、
個人的にはそのクラスがどのパーツ（headerorcontainerorfooterなのか）を表しているか
パッと見わかりづらいと感じるため、大枠の親クラスに対しては複数回使用しなくても定義して良いと感じる

引用

機能とディレクティブ（Tailwind CSS）

Discussion

RyoAsai-zenn

nice