tailwindcss-development

Name: tailwindcss-development
Author: laravel

github.com/laravelデザイン・UI3.7k952 回インストール2 週間前に更新

tailwindcss-development について

Tailwind CSS で HTML をスタイリングする開発者向けのスキルです。プロジェクトの規約と Tailwind CSS v3 を重視し、クラスの整理やレスポンシブ表示、ダークモードの確認方法を扱います。

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/laravel/boost --skill tailwindcss-development

インストール後、Claude Code で/tailwindcss-developmentを入力して読み込まれたか確認します。

Tailwind CSS v3 のパターンとドキュメントの詳細を確認するには、search-docs を使用してください。

HTML のスタイル設定には Tailwind CSS クラスを使用してください。新しいパターンを導入する前に、プロジェクトで既に使われている Tailwind の規約を確認し、それに従ってください。
繰り返し使われるパターンを、Blade、JSX、Vue コンポーネントなど、プロジェクトの規約に合ったコンポーネントに切り出すことを提案してください。
クラスの配置、順序、優先順位、デフォルト値を考慮してください。冗長なクラスを削除し、繰り返しを減らすために親要素または子要素にクラスを追加する際は注意し、要素を論理的にグループ化してください。

@tailwind base;
@tailwind components;
@tailwind utilities;

項目を並べる際は、余白に gap ユーティリティを使用してください。マージンは使用しないでください。

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

既存のページやコンポーネントがダークモードに対応している場合、新しいページやコンポーネントも同じ方法で対応させてください。通常は dark: バリアントを使用します。

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

<div class="flex items-center justify-between gap-4">
    <div>Left content</div>
    <div>Right content</div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

Markdown 対応