カテゴリー：Tailwind CSS
-
TailwindCSSのバージョン3からですが、アスペクト比を設定できるクラスが登場しました。 aspect-ratio アスペクト比を設定することができるクラス群になります。 aspect-auto 自動調整です。 aspect…
-
tailwindでは以下のCSSを読み込ませて使います。この三つがベースとなって追加が必要であれば、開発者がここに設定していくことになります。 [crayon-633f1d3de21b2266161393/] @tailwind bas…
-
【CSS】「トランジション」について
02.20
トランジションとは？ 「時間的変化」のことです。 例 「ボタンにマウスオーバーした際に色を変えたい」という要件があった場合に、すぐに変化させるのではなく時間をかけて変化させたいケース どうやって変化させるか delay マウスを…
-
【TailwindCSS】サンプル集
02.20
tailblocks Tailwindで作られたレイアウト集です。画面の上側で画面の横幅を変えて閲覧することもできますし、ダークモードにすることなども可能です。 Tailwind Templates Alerts、Button、Car…
-
プリセットとは？ そのプリセットに含まれている設定でTailwind CSSのデフォルトの設定にすることができます。プリセットは自作したり、プロジェクト間でも共有できます。 …
-
プラグインとは？ Tailwind CSSの機能拡張を行いたい場合に使います。事前にnpm installやyarn addをする必要があります。 …
-
theme関数とは？ 「tailwind.config.js」のthemeに定義されている定数の値を返す関数です。 メリット デザインの統一化 コードやテーマ修正の際の保守性向上になる。 tailwind.css.…
-
@screenとは？ Tailwind CSSのメディアクエリーのブレイクポイントを使う書き方です。 メリット メディアクエリーの記述量を減らしつつ、@screenに書き方を統一できます。様々なブレイクポイントの乱立を避けることができ…
-
@responsiveとは？ 「@variants responsive \{...}」を省略した記述方法。「tailwind.config.js」にてメディアクエリーの閾値を設定することができます。 例 [crayon-633f1d…
-
@variantsとは？ 疑似クラスごとのCSSを適用できます。ユーティリティごとに擬似クラスが使える選択肢は決まっています（例えば、paddingなどは擬似クラスをデフォルトで使えない。）が、variantsを使うことで拡張することがで…