Zenn
Open3

tailwindcss を見ていての気付き

CSS
Tailwind CSS
biwakonbubiwakonbu

hover:bg-red-700 みたいな クラスは下記で実現している。

.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(185,28,28,var(--tw-bg-opacity));
}

hover\: はやっぱり : をエスケープしているというのと、:hover はセレクタに対し、再度付けていた。

biwakonbubiwakonbu

カスタムプロパティを使ったスタイルを定義する

自作のテキストスタイルなどを tailwindcss の標準とは別に載せたい場合に使う。

.text-color-normal {
      --tw-text-opacity: 1;
    color: rgba(94, 94, 94, var(--tw-text-opacity));
}

テキストの場合、tailwindcss の構成はこういう感じになっており、--tw-text-opacity: 1; でカスタムプロパティを使って透過度を設定している。
また、その都合上、rgba で設定する必要があるのを覚えておく必要がある。

こうしておくことで、tailwindcss の仕組みに乗っかる事ができるんだけど、もう 1 つ注意する必要があるのが、CSS の定義順。

@tailwind base;
@tailwind components;
@tailwind utilities;

この文を style.css などに入れてビルドする事になるんだけど、この呼出の前に、カスタムプロパティを使うスタイルを記載しておかないと有効にならない。
ここで若干嵌ってた。

なので、定義はこうなる。

.text-color-normal {
      --tw-text-opacity: 1;
    color: rgba(94, 94, 94, var(--tw-text-opacity));
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* @apply とか書くなら下に書く */

これで、class="text-color-normal text-opacity-70" などと書いて透過する事ができるようになる。

biwakonbubiwakonbu

border を設定する時は若干特殊

.divide-paper > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(241, 234, 224, var(--tw-divide-opacity));
}

:not([hidden]) で [hidden] 以外の要素にマッチさせる且つ、> で詳細度を上げるテクニックみて、なるほど、という感じになった。

CSS は特にテクニックとか調べたりしないので、大体何を見ても新鮮な気持ちになる。

あと、要素 ~ 要素 っていう書き方も初めてしった。

http://www.htmq.com/selector/precede.shtml