@apply
tailwindはどうしても長くなるので可読性が落ちます。そういう場合は似たようなcssをまとめて再利用することも可能です。(通常のcssのように使うことができるみたいなイメージですね。)
記述方法
CSS
1 2 3 |
.matome { @apply {tailwindcssの記述} } |
HTML
1 |
<div class="matome">まとめ</div> |
注意点
@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」にてメディアクエリーの閾値を設定することができます。
例
1 2 3 |
@responsive { .クラス名 {} } |
メディアクエリのブレイクポイントの設定(@screen)
Tailwind CSSのメディアクエリーのブレイクポイントを使う書き方です。
メリット
メディアクエリーの記述量を減らしつつ、@screenに書き方を統一できます。様々なブレイクポイントの乱立を避けることができ、修正や調査などの手間を軽減することが可能になります。
例
1 2 3 |
@screen sm { .クラス名 {} } |
この記事へのコメントはありません。