2022-07-13

TailWindCSSのlast、@apply、last-of-typeを使ってみる

:not ではなく

CSS で、最後の要素以外に適用したいという場合

li:not(:last-child) {
  margin-right: 1rem;
}

とりあえず、こんな感じで書いてみたとする。

これを TailWindCSS で書く場合、どうするか？

:not はどうやらないらしいので、調べてみたところ以下の記事が出てきました。

last (:last-child)

<ul className="flex">
  {post.tags.map((tag) => (
    <li key={post.id} className="mr-4 last:mr-0">
      {tag}
    </li>
  ))}
</ul>

li 全体に mr-4 を適用した上で、last だけ mr-0 として、margin を適用させないというやり方っぽい。

@apply

blog-starter（Github）

blog-starter のソースを見ていたら、@apply の記述があって、何だこれ？　となったので、調べてみました。

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

なるほど、ボタンやフォームなど小さい範囲で再利用可能なものに適用すると良さそうなのか…

last-of-type

:last-of-type（mdn web docs）

掲載されている last-of-type のサンプルコード

<article>
  <div>This `div` is first.</div>
  <div>This <span>nested `span` is last</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`!</div>
</article>

css は以下の様になっています。

article :last-of-type {
  background-color: pink;
}

これをブラウザで見てみると、結果の箇所と同じものが表示されました。

TailWindCSS の last-of-type で置き換えてみると…

<article className="last-of-type:bg-pink-300">
  <div>This `div` is first.</div>
  <div>
    This <span>nested `span` is last</span>!
  </div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`!</div>
</article>

これをブラウザで見てみると、先の結果と同じではなく、article で囲まれたタグ内全て（の背景）がピンクになってしまいました…

単に置き換えるだけでは、駄目っぽいなぁ…

TailWindCSSのlast、@apply、last-of-typeを使ってみる

目次

:not ではなく

@apply

last-of-type