【CSS】「TailwindCSS」の再利用について(@apply)、レスポンシブ対応(@responsive、@screenなど）

@apply

tailwindはどうしても長くなるので可読性が落ちます。そういう場合は似たようなcssをまとめて再利用することも可能です。（通常のcssのように使うことができるみたいなイメージですね。）

記述方法

CSS

HTML

注意点

@applyを使いすぎると管理が大変になりそれはそれで注意が必要です。どうしても使い回しが多くなるもののみ使うようにし、できるだけまとめずに記述していくようにしましょう。

VSCodeでエラーが出た場合

@applyにVSCodeが対応していなくてエラーが出る場合があります。色々解決策はあるみたいですが、「PostCSS Language Support」というVSCodeプラグインを導入することによって解決することができます。

レスポンシブの基本的な記述

sm:${class名}

640px以上の場合。「スマホ端末の横幅」を意識する場合に使う。

md:${class名}

768px以上の場合。「タブレットの最小幅」を意識する場合に使う。（iPad miniがこのサイズのため）

lg:${class名}

1024px以上の場合。「タブレットの最大幅」を意識する場合に使う。(iPad Proの横幅がこれになっているため）、基本的にこれ以上の幅はPCデザインと決めつけてPCデザインにすることが多いです。

xl:${class名}

1280px以上の場合。大きいモニターの最大サイズを意識する場合はこれを使う。

2xl:${class名}

1536px以上の場合

メディアクエリの閾値を設定（@responsive）

「@variants responsive \{...}」を省略した記述方法。「tailwind.config.js」にてメディアクエリーの閾値を設定することができます。

例

メディアクエリのブレイクポイントの設定（@screen）

Tailwind CSSのメディアクエリーのブレイクポイントを使う書き方です。

メリット

メディアクエリーの記述量を減らしつつ、@screenに書き方を統一できます。様々なブレイクポイントの乱立を避けることができ、修正や調査などの手間を軽減することが可能になります。

例