Tailwindcss– category –
-
Tailwind CSS でhover下線をアニメーション化する方法
Tailwindcss では class に 「underline」 と書くだけで下線を引いてもらえる便利な機能があります。 けれども、 hover:underline だとパッと瞬間的に下線が引かれてしまい、視覚的に物足りないように思います。 下からスッと線が伸びるようなアニメーショ... -
Tailwindcssでtransitionのアニメーションが動かない問題
Tailwindcssで、棒状にアニメーションを入れてみました。 棒状の図は出てきたのですが、アニメーションが動きません。 なぜアニメーションが動かないのか調査した備忘録です。 Tailwindcssで書いた元々のコード まず動かなかったコードを公開します。 HTML... -
Tailwindcssでテキストボックスのフォーカスが当たった時に枠線の色を変える方法
テキストボックスにフォーカスが当たった時、黒く太い枠線が表示されます。 サイトによってはテーマカラーに応じて好きな色に変えたい時もありますよね。 なので、Tailwindcssを使ってフォーカスが当たった時にだけ枠線の色を変えようと思います。 ↓の pas... -
Tailwindcssでダークモードを動的に適用する方法
Tailwindcssにはダークモードが搭載されています。 筆者もダークモード愛用者なので、これは嬉しいところ。 HTML<html class="dark"> ... </html<html class="dark"> ... </html 上記のように、HTMLの先頭のクラスに dark を指定... -
Tailwind CSSでフッターの境界線をおしゃれに見せる方法｜box-shadow活用例
ポートフォリオサイトを制作しているとき、「フッターとコンテンツの境界線をどう見せるか」で悩みました。 単純にborderを使う方法もありますが、どうしても線の印象が単調でお粗末な印象を受けてしまいがちです。 そこで今回は、Tailwind CSS のbox-shad...
1