TailwindCSSでbeforeをつかって四角などのシェイプを追加したい

tailwindcss

Last updated at 2023-12-16Posted at 2023-12-16

この記事では、TailwindCSSでbeforeを使う時の方法について伝えます！

とあるAI検索エンジンでTailwindCSSを使ったbeforeの実装について調べると何故かサポートされていないと結果を返されますが、TailwindCSSでもbeforeやafterを使って実装はできます！

TailwindCSSでbeforeの使い方

TailwindCSSでbeforeを使う場合下記のように記述します

const Component = ({ children }) => {
  return (
    <p className="before:content-[''] before:flex-shrink-0 before:w-4 before:h-4 before:bg-black">
      {children}
    </p>
  )
}

beforeに限らずですが、TailwindCSSを利用している場合classの定義部分が長くなり読みづらくなります…。

改行するだけでも可読性が良くなるので気にかけられると良いと思います！

const Component = ({ children }) => {
  return (
    <p
      className="
        before:content-['']
        before:flex-shrink-0
        before:w-4
        before:h-4
        before:bg-black
      "
    >
      {children}
    </p>
  )
}

【余談】アイコンやシェイプの設置に`before`や`after`を利用すべきか？

テキストの横にアイコンやシェイプを設置する時に「beforeやafter」を利用すべきか？と悩む時があります…。

正解はないと思いますが、自分なりに結論を出してみたので新しくサイトを構築する際やコンポーネントを作成する際にお役立ていただけると幸いです。

`before`や`after`を利用するのが良い

シンプルな四角や円であればbeforeやafterを利用し、beforeやafterでは表現しにくい複雑なアイコンや郵便マークなど意味のあるアイコンはSVGにするので良いのではと考えています。

負荷の観点

少なからずビルドの負担があるかと思います。
シンプルなシェイプであればCSSで実装してしまうので良いのではと考えました。

管理の観点

コンポーネントとは別に画像として管理することになります。
CSSでの実装であればコンポーネントに閉じられているたコードの見通しが良いですが、SVG等で管理する場合ファイルの場所やその後の修正などのコストは発生する可能性があると考えました。

場合によってはアイコン用のコンポーネントを作成することもあると思います。
classの指定が長くなるデメリットはありますが、beforeやafterの方が管理しやすいのではないか？と考えました。

SEOの観点

beforeやafterを利用せずに空の要素（divタグなど）にスタイルを当てて実現する方法もあります。
SEOの評価にクリティカルな影響はないとはいえブラウザ上に無意味な要素がレンダリングされるのは避けたいところではあるのでbeforeやafterを利用するのが良いかと考えました。