「tailwindcss」タグのついた35記事

Button で学んだデザイントークン・cva・cn・Slot・型のパターンを、デザイントークン / プリミティブ / パターンの 3 階層からなる 1 つのデザインシステムとしてまとめる最終章。チーム運用のポイントと次のステップも紹介します。

shadcn/ui の cn 関数を構成する clsx と tailwind-merge の内部挙動を、実際の動作結果とともに掘り下げる章。falsy の除外、conflict group による競合解決、clsx → twMerge の順序の理由を学びます。

この章では、cva（class-variance-authority）によるスタイルバリアントの宣言的な管理について学びます。cva が内部で何をしているのか、競合解決を「やらないこと」まで理解します。

Tailwind CSS で Flexbox レイアウトを構築する手順。flex コンテナの作成から flex-direction / flex-wrap / justify-content / align-items / gap / order までを表で整理し、ナビゲーションバー・カード・検索フォームの実装例で定着させます。

CSS Grid を Tailwind CSS で活用する方法。grid-cols / grid-rows・col-span / row-span・place-items・grid-auto-flow・サブグリッド対応まで体系化し、ダッシュボード / カードギャラリー / 画像グリッドの実装で定着させます。

この章では、radix-ui の Slot と asChild パターンについて学びます。スタイルを保ったままレンダリングされる HTML 要素を差し替える「合成（composition）」の考え方を解説します。

この章では、ref を使って DOM 要素にアクセスする方法について学びます。React 19 で ref が通常の prop になった新しい書き方を本筋に、従来の forwardRef も押さえます。

React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応。Button を題材に、デザイントークン・cva・cn・Radix Slot を通じて、デザインシステムに沿った再利用可能なコンポーネント設計を学ぶ全 13 章のガイド。

React 開発でデファクトとなった Tailwind CSS を React で実用するための章。セットアップと基本は別ガイドに任せ、本章は variants 設計・clsx / tailwind-merge / cn ユーティリティ・shadcn/ui との連携など React 統合特化のパターンを扱います。

Tailwind CSS v4 対応の体系学習ガイド全 18 章。ユーティリティファーストの考え方から、Flexbox/Grid・タイポグラフィ・カラー・レスポンシブ・ダークモード・コンテナクエリ・アニメーションまで。実践プロジェクトでランディングページを構築し、モダン CSS スタイリングを身につけます。

Tailwind CSS v4 対応ガイドの導入章。ユーティリティファーストの考え方、従来 CSS フレームワークとの違い、CSS-First Configuration / Oxide エンジン / コンテナクエリ標準対応など v4 新機能の概要、本ガイド全体の構成を紹介します。

Tailwind CSS のユーティリティファーストの考え方を、shadcn/ui Button の実クラス列を分解しながら学ぶ章。レイアウト・状態修飾子 (hover / focus-visible / disabled)・スペーシングスケール・デザイントークンの入り口を解説します。

この章では、shadcn/ui の Button を支える TypeScript の型について学びます。React.ComponentProps・VariantProps・交差型による props 定義と、React 19 で forwardRef のジェネリクスが不要になった理由を解説します。

Tailwind CSS のアニメーション実装。transition / duration / ease / delay の基本、scale / rotate / translate / skew の Transform、v4 の 3D トランスフォーム (perspective / rotate-x/y/z)、組み込み animate-* と motion-safe/reduce アクセシビリティを実装例で整理。

Tailwind CSS v4 の CSS-First Configuration の実践。`@theme` でカラー / フォント / スペーシング / ブレークポイント / シャドウ / アニメーションを CSS 内で定義し、`@utility` / `@custom-variant` / `@plugin` / `@layer` でテーマ拡張を実装します。

Tailwind CSS のカラーパレット (26 色 × 11 段階、v4.2 時点) と使い方。テキスト / 背景 / ボーダー / リング / 透明度 (color-mix の /N 記法) / v4 の oklch カラースペース / CSS 変数連携 (bg-(--my-color)) までを実践例で網羅。

Tailwind CSS v4 で標準サポートされたコンテナクエリの解説。`@container` の宣言、@3xs〜@7xl のコンテナブレークポイント、名前付きコンテナ、任意値 `@[500px]:` 記法、メディアクエリとの使い分けを実装例で整理。

Tailwind CSS で再利用可能な UI コンポーネント (ボタン / カード / フォーム / ナビ / アラート / バッジ / ツールチップ / モーダル) を体系的に実装。アクセシビリティ (ARIA 属性) も整理し、本番品質のパターンを学びます。

Tailwind CSS で要素のサイズ (width / height / min-* / max-* / size-*)、配置 (static/relative/absolute/fixed/sticky)、z-index、object-fit、overflow、aspect-ratio を体系化。中央配置 3 パターン・固定ヘッダー・モーダル等の実装例も整理。

Tailwind CSS の 4px ベースのスペーシングシステム。padding / margin / gap / space-* / 論理プロパティ (ps/pe) を比較し、フルブリードレイアウトのための負マージンや v4 の任意値指定まで実践例で整理します。

Tailwind CSS の `dark:` バリアントによるダークモード実装。メディアクエリ / クラスベース / セレクターベース 3 方式の比較、FOUC 対策、推奨カラーマッピング、CSS 変数によるテーマカラー一元管理を実装例で網羅。

Tailwind CSS でテキストをスタイリングする手順。フォントサイズ (text-xs〜text-6xl) / weight / family / 行高さ / 字間 / 装飾 / 省略 (truncate, line-clamp) / 日本語フォントの考慮事項までを実践例で整理します。

bg-primary の色がどこから来るのかを解説する章。デザイントークンの 2 階層（プリミティブ / セマンティック）、OKLCH カラー、Tailwind v4 の @theme inline によるトークン定義、ライト / ダークテーマの仕組みを学びます。

React・Tailwind CSS・shadcn/ui などフロントエンド開発に関するノートをまとめるドメインのハブ。UI 構築・スタイリング・コンポーネント設計を扱う。

Tailwind CSS の核心となるユーティリティファーストの思想を従来 CSS と比較しながら解説。クラス命名規則、4px ベースのスペーシングスケール、HTML 肥大化対策 (コンポーネント化 / @apply / @reference) まで体系的に整理します。

Tailwind CSS のモバイルファーストアプローチによるレスポンシブ実装。sm/md/lg/xl/2xl のブレークポイント、max-* バリアント、v4 のカスタムブレークポイント、任意値ブラケット記法をナビ/ヒーロー/フッターの実装例で整理。

本書で組み立てる shadcn/ui Button コンポーネントの完成形を先に確認する章。cva・cn・Radix Slot・デザイントークン・React 19 の ref など、使われている技術の全体像と基本的な使い方をつかみます。

学んだ Tailwind CSS v4 の知識を統合し、SaaS ランディングページを構築する実践章。ヒーロー / 機能紹介 / 料金プラン / FAQ / CTA / フッターの全セクションを実装し、@theme + @keyframes でカスタムアニメーションも整備します。

素の button から始めて、Tailwind のデザイントークン・cva・cn・asChild (Slot)・TypeScript の型を 1 ステップずつ重ね、shadcn/ui 流の Button コンポーネントをゼロから完成させる実践演習。success バリアントやローディング状態の追加課題つき。

shadcn/ui の Button を題材にデザインシステム設計を学ぶガイドの導入章。本書の目的・対象読者・全 13 章の構成と、なぜ Button がコンポーネント設計の題材として最適なのかを説明します。

Tailwind CSS の状態バリアント (hover / focus / focus-visible / focus-within / active / disabled / invalid / checked) とグループ (group-*) / ピア (peer-*) / 擬似クラス (first/last/odd/even)・擬似要素 (before/after) / has-* まで体系化。

Tailwind CSS v4 の開発環境を Vite / PostCSS / CLI / CDN の 4 通りでセットアップする手順。対応ブラウザ要件、VS Code 拡張 (Tailwind CSS IntelliSense)、Prettier プラグインによる class 並び替え、本番ビルドサイズの目安まで網羅。

Vite + React 19 + TypeScript + Tailwind CSS v4 で shadcn/ui Button 学習用の開発環境を構築する章。cva・clsx・tailwind-merge・radix-ui の導入、cn 関数の作成、パスエイリアスの設定までを手順で解説します。

Button で学んだ cva・cn・Slot・デザイントークンのパターンを Badge・Input・Card・Alert に応用する章。コンポーネントごとのパターン選択ガイドと設計のベストプラクティスをまとめます。

Tailwind CSS で背景 (グラデーション含む)・ボーダー・角丸 (border-radius)・シャドウ・リング (フォーカス)・アウトライン・分割線 (divide) を体系的に整理。カード/ボタン/ヒーローセクションなど UI 部品の実装例まで網羅。