TailwindCSSで実装する時に知っておくべきポイント18選

tailwindcss

Last updated at 2024-07-15Posted at 2024-07-15

TailwdindCSSの実装時に知っておけると良いと思うポイントをまとめました！
参考にいただけると幸いです！

Summary

hoverでのスタイル定義について

TailwindCSSでは、既存のクラスにホバー状態を追加するのではなく、ホバー時のみ実行するクラス要素を追加されることを留意しなければなりません…

動作が想定通りではない…と思ったら、通常の:hoverとは違うことを思い出せると良いでしょう！

peerを利用する際の注意点

peerは、peerの直後にpeer-*を付与した要素を設置することで利用できます。
順番を前後させてしまうと動作しないことに注意してください。

<p className="peer-invalid:visible">
  Please provide a valid email address.
</p>
<input type="email" className="peer"/>

`*`を利用してスタイルを適用させた場合の注意点

親要素で*を利用して子要素に対してスタイルを適用させた場合、子要素でユーティリティclassを適用してのclassのオーバーライドは機能しません。

<ul className="*:p-4">
  <li className="p-2">list item</li>
  <li className="pt-6">list item</li>
  <li>list item</li>
</ul>

`content:`を利用する場合

TailwindCSSではデフォルトでcontent: ''が設定されています。
別の値が必要な場合の除いて指定する必要がありません！

content: ''がデフォルトで設定されているのは、TailwindCSSで用意されているpreflightで設定されているからです。
もし、無効にしていた場合はcontent-['']を設定する必要があります。

preflightがリセットしていないもの

TailwindCSSのpreflightでファイル入力ボタンのborderはリセットされません…。
リセットや追加には明示的に指定する必要があります。

`marker`のスタイリングについて

markerは継承可能な設計になっているため、<li>に直接指定できるだけでなく繰り返しを避けるために親のul等で指定することもできます！

markerのデフォルトスタイルがpreflightではリセットされているためulタグからrole='list'が消えてしまっているため、ulに対してrole='list'をしておくことをオススメします。

任意の修飾子を複数回利用したい場合

tailwind.configでプラグインを定義することで繰り返し利用することができます。

let plugin = require('tailwindcss/pligin')

module.exports = {
  //...
  plugins = [
    plugin(function({ addVariant })) {
      addVariant('third', '&:nth-child(3)')
    }
  ]
}

Tailwindの親および兄弟の状態修飾子では自動的には機能しない

カスタム修飾子は親要素や兄弟要素の状態修飾子を機能させるためには設定を追加する必要があります。

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('group-optional', ':merge(.group):optional &')
      addVariant('peer-optional', ':merge(.peer):optional ~ &')
    })
  ]
}

ブレイクポイントについての重要事実

TailwindCSSのブレイクポイントは下記のように指定します。

<div class="text-center sm:text-left"></div>

このアプローチで人々が最も驚かされるのは、モバイル用にスタイルを設定するには、ユーティリティのプレフィックス付きバージョンではなく、sm:プレフィックスなしバージョンを使用する必要があることです。「小さな画面で」という意味ではなくsm:、「小さなブレークポイントで」という意味で考えてください。

TailwindCSSは、プレフィックスのないユーティリティを使用してモバイルをターゲットにし、より大きなブレークポイントでそれらをオーバーライドすることでスタイルを適用させます！

https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens

ダークモードバリアントを上書きする時は注意

TailwindCSSで用意されているダークモードバリアントを置き換えたい場合は下記のようにします。

tailwind.config

module.exports = {
  darkMode: ['variant', '&:not(.light *)'],
}

提供されたセレクターを一切変更しないため、セレクターの詳細度に注意し、自分で:where()疑似クラスを使用して他のユーティリティと同じ詳細度を確保するする必要があります。

`@apply`を使わない

TailwindCSSの公式ドキュメントには@applyを利用する記述がいくつかあります。
ただ、@applyは利用することが推奨されていないことを意識しましょう。

見た目を「きれいに」するためだけに使用しないでください

と書かれているように@applyはTailwindCSSを利用することで得られるメリットを破壊してしまう可能性が高いためです…。

空白の処理

任意の値にスペースを含めるには_（アンダースコア）を使用します。
するとビルド時に自動的にスペースに変換します。

<div class="grid grid-cols-[1fr_500px_2fr]">

URLではアンダースコアが保持されます。

<div class="bg-[url('/what_a_rush.png')]">

アンダースコアをバックスラッシュでエスケープすると、スペースに変換しません。

<div class="before:content-['hello\_world']">

レンダリングされたHTMLからバックスラッシュが削除される場合は、String.raw()を使用するとバックスラッシュがJavaScriptエスケープ文字として扱われるようになります。

<div className={String.raw`before:content-['hello\_world']`}>

ユーティリティクラスとして定義されてないものをつかいたい時

TailwindCSSで使用できるユーティリティが含まれていないCSSプロパティを使用するには角括弧表記を使用して記述します。

<div class="[mask-type:luminance]">

`@layer`ディレクティブは個別のコンポーネント内では利用しない

TailwindCSSは<style>タグが書かれてコンポーネントの数だけ生成しようとするため、最終的な出力CSSが予期せぬ形になる可能性があります。

各styleブロック間でのスタイルの整合性が保証されないため、期待通りのレイヤー構造を得られない可能性があります。

`!import`を使いたい場合の注意点

@apply既存のクラスをにしてにしたい場合は!important、!important宣言の最後に以下を追加するだけです。

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

Sass/SCSSを使用している場合、Sassの補間機能を使用する必要があることに注意してください。

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

`@config`利用時の注意

@configは@importの宣言前に利用はできません。

ダメな例

@config "./tailwind.admin.config.js";
@import "tailwindcss/base";

tailwind.configへのアクセスについて

関数theme()を使用して、ドット表記を使用してアクセスします。

.content-area {
  height: calc(100vh - theme(spacing.12));
}

ドットを含む値 (2.5間隔スケールの値など) にアクセスする必要がある場合は、角括弧表記を使用できます。

.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}

ネストされたカラー値にアクセスするときはダッシュ構文を使用しないでください

.btn-blue {
  background-color: theme(colors.blue-500);
}

ドット表記を使用してネストされたカラー値にアクセスする

.btn-blue {
  background-color: theme(colors.blue.500);
}

不透明度を調整するにはスラッシュに続けて使用する不透明度の値を指定します。

.btn-blue {
  background-color: theme(colors.blue.500 / 75%);
}

動的class名

TailwindCSSは実際にはソースコードを評価せず、静的で途切れていないクラス文字列しか検出できません。

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

コードでは常に完全なクラス名を使用するようにしてください。

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

まとめ

TailwindCSSは色々と通常とは異なるルールがあります。

把握しておくことで予期せぬ動作やTailwindCSSのメリットを壊しかねない実装を防ぐことになります！

本記事がTailwindCSSを理解するための一助になれば幸いです！

お題は不問！Qiita Engineer Festa 2024で記事投稿！

Qiita Engineer Festa20242024年7月17日まで開催中！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up