なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

CSS

HonoX で TailwindCSS を使おう

HonoX 0.1.19 で外部でビルドされる (ここでは HonoX によって直接ビルドされるのではなく、 Vite や PostCSS を指す)、CSS の差し込みに対応したので、 TailwindCSS のような PostCSS でビルドされてスタイルが決定されるようなスタイリング手法も使える…

CSS で親要素をはみ出して、画面幅いっぱいに要素を表示させたい

といっても背景限定ですが、 CSS にて親要素をはみ出して、画面幅いっぱいに表示させる方法。 よく見る下記のようなコードでは、 Windows では縦スクロールバーの分まで含まれてしまい、横スクロールが出来るようになってしまう。 .overflow { width: 100vw;…

NightwindCSS で TailwindCSS のダークモード対応を楽にしたい

考えることを極力減らしたい、そんな私ですが、ダークモード対応も面倒ですよね。 そんなときに使えるのが NightwindCSS という TailwindCSS のプラグインがあります。 それを使ったダークモード対応のお話。 といっても導入方法は簡単で、以下のようにして…

TailwindCSS で Container のサイズを調節したい

CSS

相変わらず CSS を書きたくないので TailwindCSS を使っているわけですが、 今回は .container の設定を変更するお話です。 TailwindCSS では、デフォルトで以下の Container 設定がされています。 Breakpoint Properties none width: 100% 640px (sm) max-w…

TailwindCSS で新しいバリアントを追加したい

CSS

私は CSS を書きたくないタイプの人間なので、基本的には Bootstrap や TailwindCSS みたいな、 CSS フレームワークを使って Web サイトを構築するタイプの人間です。 ということで、今日はそのうちの TailwindCSS のお話 例えば、 CSS 疑似要素の first-let…