Tailwindcss– tag –
-
hoverすると下線が引かれるアニメーションを作ろう
Tailwindcss では class に 「underline」 と書くだけで下線を引いてもらえる便利な機能がある。 けれども、パッと瞬間的に下線が引かれる。 それは当たり前だろと思われるかもしれないけれど、これもアニメーションで 左から右へ下線を引くことが出来ない... -
Tailwindcssでtransitionのアニメーションが動かない問題
Tailwindcssで、棒状にアニメーションを入れてみました。 棒状の図は出てきたのですが、アニメーションが動きません。 なぜアニメーションが動かないのか調査した備忘録です。 Tailwindcssで書いた元々のコード まず動かなかったコードを公開します。 HTML... -
Tailwindcssのポップオーバーのテキスト表示について
Tailwindcssのポップオーバーを弄っているとあることに気が付いた。 HTML<?php $sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしま... -
フォーカスが当たった時にだけ枠線の色を変えたい
入力欄を入力していて、フォーカスが当たった時に黒く太い枠線になる。 どうせなら好きな色に変えたい時もありますよね。 なので、フォーカスが当たった時にだけ枠線の色を変えようと思う。 https://tailwindcss.com/docs/hover-focus-and-other-states#re... -
Tailwindcssのポップオーバーを画面中央に表示させたい
Tailwindcss に搭載されている機能のポップオーバーの位置を中央に表示させたかったときのメモです。 Tailwindcssにもポップオーバーがあった 結果表示画面が出来てきて、意味も表示させたいけれど、そこまでは見栄えとしてテーブルに表示するのはよくない... -
ログイン画面を作ろう
問題のデータを入れるために管理画面が必要になりました。 ただ、その管理画面は筆者以外には触らせるわけにはいけません。 その管理画面を作るにあたっての方法をお伝えします。 ログイン情報ファイルを作ろう 今回は、Basic認証ではなく、自分で作ります... -
Tailwindcssでダークモードを動的に適用したい
Tailwindcssにはダークモードが搭載されています。 筆者もダークモード愛用者なので、これは嬉しいところ。 HTML<html class="dark"> ... </html<html class="dark"> ... </html 上記のように、HTMLの先頭のクラスに dark を指定... -
送信ボタンに付けるSVG画像と格闘した
お問い合わせフォームの送信ボタンを押した後、数秒間delayがあることに気が付いたので、 二重クリック防止＋今は送信処理中ですよーということをアイコンを使ってアニメーションで表現することにしました。 とりあえず<img>として画像表示＋Tailwin... -
フッターの区切り線にbox-shadowを使いたい
Tailwindcssにはbox-shadowという、オブジェクトに陰影を付与するクラスがある。 これフッターの区切り線に使えないかな～？ box-shadow をそのまま使った場合 HTML<footer class="shadow-lg"> ... </footer><footer class="shadow-lg"... -
Tailwindcssの差分が更新されない時の対策
順調にTailwindcssを使っていたある日・・・。 とあるクラスをあててもスタイルが表示されていない。。。 それは「border-l-4」と「border-teal-300」。 「border-l-2」はスタイルがあたるのに、どうしてなのかさっぱりわからない。 そんな時に調べてまと...
12