AstroにTailwind CSSを設定

まずはAstroにTailwind cssをインストールします。
ターミナルで以下のコマンドを打って、続くそれぞれの質問にyesで答えるだけでインストール完了です。

# Using NPM
npx astro add tailwind
# Using Yarn
yarn astro add tailwind

Tailwind CSSのTIPS集

ここからTailwind CSSの便利な使い方を紹介します。

祖先要素の指定

 <p class="[.p-top_&]:text-white">

[.p-top_&]:text-whiteと書くことで、親要素にp-topクラスがある場合にスタイリングを適用できます。

複数の祖先要素の指定

 <p class="[.p-top_&]:text-white [.is-scrolled.p-top_&]:opacity-100">

[.is-scrolled.p-top_&]:opacity-100で以下のCSSと同じ記述を適用できます。

.is-scrolled.p-top {
opacity: 1;
}

祖先要素の状態によるスタイリングの指定

<a href="#" class="group">
  <span class="group-hover:text-white">テキスト</span>
</a>

祖先要素に group をつけて、子孫要素に group-* でスタイルを指定することができます。主にホバーアクションを指定したいときなどによく使うと思います

子孫要素の一括指定

[&_a]:text-white

ヘッドレスCMSから取得した外部コンテンツを表示する場合などで役立ちます。

自身の要素に特定クラスがあるときにスタイルを適用

<h1 class="text-black [&.active]:text-red-500">
  テキストです。
</h1>

隣接要素の指定

<label>
  <input
    type="radio"
    name="お問い合わせ内容"
    value="開発についてのお悩み"
    checked="checked"
    className="peer"
  />
  <span className="peer-checked:after:absolute peer-checked:after:left-1 peer-checked:after:block peer-checked:after:h-3 peer-checked:after:w-3 peer-checked:after:rounded-full peer-checked:after:bg-black">
    開発についてのお悩み
  </span>
</label>

隣接要素にpeerクラスをつけ、peer-checkedなどとすれば隣接要素の状態によってスタイリングを変更できます。
フォームのラジオボタンなどのスタイリングをカスタマイズしたいときなどに重宝します。

メディアクエリの max-width

通常、Tailwind CSSのメディアクエリはmin-widthで指定あるので、モバイルでのみスタイリングを適用したい場合、大きいメディアクエリのサイズで打ち消す必要がありました。

//スマホでのみ必要なマージンをPCで打ち消している
<h2 class="m-4 lg:mt-0">
  Menu
</h2>

//メディアクエリがsmサイズの場合のみ適用される
<h2 class="max-sm:m-4">
  Menu
</h2>

特殊なブレークポイントの指定

<div class="min-[1440px]:text-[5vw]">
  <p>テキストです。</p>
</div>

特殊なブレイクポイントなどはこのように書くことでconfigファイルにわざわざ設定する手間が省けます。

keyframeの指定

//tailwind.config.cjs
module.exports = {
  theme: {
    extend: {
      keyframes: {
       anim1: {
          "0%": { opacity: 0}
          "100%": {　opacity: 1,},
        },
      },
      animation: {
        anim1: "anim1 0.5s forwards",
      },
    },
  },
};

Tailwind CSSでkeyframeを使えるようにするには、tailwind.config.jsのtheme内のextendの中にkeyframesとanimationを作成します。

<div class="animate-anim1"></div>

そしてanimate-とクラス指定することで適用されます。

任意の値を設定

<div class="w-[762px]">

Tailwind CSSにはJITモード（Just-in-Time Mode）というのがあり、
Tailwind CSSでデフォルトで指定されていない任意の値を指定することができます。
w-[762px]のように指定すると任意の値が適用されます。