【Tailwind CSS】ネスト記述を使うには

2024.07.10

Tailwind CSSはタグにTailwindクラス名を記載していく使い方が基本です。
が、どうしても従来のsassファイルのように独自のクラス名を作って進めたいという場合もあります。Tailwindはタグの記述がどんどん長くなってしまうのでね…

その場合はcssファイルを作成しクラス名を作成し、Tailwindのクラスを@applyで記述していくだけです。簡単です。

ただ、これだけだとまだ使いづらい…
sassのようなネストの書き方できない…!!

その場合はSassをプロジェクトにインストールすればOKです。ネスト記述は通常のcssではなくsassでしかできないですからね。
Tailwindに慣れてない時にReactプロジェクトで使いました。

インストールは下記です。

npm install sass

これを使えばネストした書き方もできます。以下の例はpタグに対して、ネストして画面幅に合わせてTailwindのスタイルを当てている例です。

p {
  @apply text-2xl;
  @screen md {
    @apply text-8xl;
  }
}

totop Page Top