Tailwind

開発ブログ

Tailwindの hover: や md: って何?状態プレフィックスのしくみを調べた

Tailwind CSSの「hover:」「focus:」「md:」といった状態プレフィックスのしくみを調べてまとめました。マウスを乗せたとき・画面幅ごとに見た目を変える書き方や、プレフィックスを重ねる順番、効かないときの原因を初心者目線で整理しています。
開発ブログ

Tailwind CSS|–color-〇〇 の「〇〇」がそのままクラス名になる

Tailwind CSSの「bg-accent」のような独自カラーがどこで決まっているのかをまとめました。index.cssの@themeに--color-で色を定義すると、bg-〇〇やtext-〇〇として使えるようになるしくみを、実際のコードで簡単に解説しています。
開発ブログ

Tailwindの色「–color-ink-soft」って何色?VScodeの拡張機能「Color Highlight」が便利!

お薬タイマーの開発中、AIが書いた「--color-ink-soft」という色の指定がわからず、カラーコードを探し回りました。Tailwind v4の色変数のしくみと、index.cssやColor Highlightで色を確認する方法を初心者目線でまとめています
開発ブログ

Tailwind v4の余白がわからない!mb-6の中身「calc(var(–spacing) * 6)」を調べた話

お薬タイマーの開発中、Tailwindの余白がなぜかうまく動かず悩みました。mb-6の正体「calc(var(--spacing) * 6)」のしくみと、余白が変わらないときの原因、私が使った調整方法を初心者目線でまとめています。