Cursor での Tailwind CSS 開発

Tailwind CSS は、マークアップで直接構成される包括的なユーティリティクラスセットを提供することで、開発者がスタイリングにアプローチする方法を変革しました。Cursor（AI 駆動の IDE エディタ）と組み合わせることで、インテリジェントなクラス提案、自動設定、およびコンポーネント抽出を通じて、Tailwind 開発はさらに効率的になります。このガイドでは、Cursor 内での基本的なユーティリティ使用から高度なカスタマイズワークフローまで、すべてをカバーします。

Cursor での Tailwind 入門

Cursor は Tailwind CSS を深いレベルで理解しています。エディタはユーティリティクラスのインテリジェントな自動補完を提供し、カスタム設定を認識し、設計の説明に基づいて完全なコンポーネントマークアップを生成できます。この統合により、従来 Tailwind 開発に伴うドキュメントとコード間の絶え間ないコンテキスト切り替えがなくなります。

Cursor が強化する主要な Tailwind ワークフローには以下が含まれます：

• CSS プロパティプレビュー付きのリアルタイムユーティリティクラス自動補完
• 設計の説明からの AI 生成コンポーネントマークアップ
• 繰り返しパターンの自動抽出を再利用可能なコンポーネントへ
• 型安全な IntelliSense を備えたカスタムテーマ設定
• レスポンシブおよび状態バリアントの提案

このガイドでは、HTML と CSS の概念を基本的に理解していることを前提としています。すべての例は React と TypeScript を使用していますが、原則は Tailwind がサポートするあらゆるフレームワークに適用されます。

Cursor プロジェクトでの Tailwind のセットアップ

適切なプロジェクト設定により、Cursor は Tailwind IntelliSense と AI 機能の全範囲を提供できます。

インストールと設定

プロジェクトを初期化し、Tailwind の依存関係をインストールします：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

プロジェクト構造に一致するコンテンツパスで tailwind.config.js を設定します：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

グローバル CSS ファイルに Tailwind ディレクティブを追加します：

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

この設定を Cursor で開くと、エディタはすぐに利用可能なすべてのユーティリティクラスとカスタムテーマ値をインデックス化します。AI はコンテンツパスを理解し、プロジェクト構造に固有のクラス使用を提案できます。

ヒント

Cursor の拡張機能マーケットプレイスで Tailwind CSS IntelliSense 拡張機能が利用可能な場合はインストールしてください。これにより、ユーティリティクラスにマウスオーバーしたときにインライン CSS プロパティプレビューが提供され、開発が大幅に高速化されます。

TypeScript 統合

Cursor の型チェックで最高のエクスペリエンスを得るには、TypeScript 設定が JSX とフレームワークの型を認識していることを確認してください：

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true
  }
}

Cursor はこれらの型を使用して、Tailwind クラス提案と並行してコンポーネント props の正確な自動補完を提供します。

ユーティリティクラスの習得

ユーティリティクラスは Tailwind の基盤です。Cursor の自動補完と AI 機能は、適切なユーティリティを効率的に発見し適用するのを助けます。

コアユーティリティパターン

レイアウトユーティリティから始めます。Cursor は、入力中に生成される CSS のプレビューを表示しながら、適切なクラスを提案します：

export function Card() {
  return (
    <div className="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md">
      <h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
        Card Title
      </h2>
      <p className="mb-4 text-base text-gray-700">
        This card demonstrates core Tailwind utility patterns.
      </p>
      <button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Action
      </button>
    </div>
  );
}

Cursor でクラス名を入力すると、エディタは論理的な順序で補完を提案します：レイアウト、スペーシング、サイジング、タイポグラフィ、背景、ボーダー、効果、およびインタラクション。この順序は、Tailwind のドキュメントがユーティリティを整理する方法を反映しています。

ブレークポイントプレフィックスを使用したレスポンシブデザイン

Cursor は Tailwind のレスポンシブプレフィックスを認識し、適切に提案します：

export function ResponsiveGrid() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <div className="rounded-lg bg-gray-100 p-4">Item 1</div>
      <div className="rounded-lg bg-gray-100 p-4">Item 2</div>
      <div className="rounded-lg bg-gray-100 p-4">Item 3</div>
      <div className="rounded-lg bg-gray-100 p-4">Item 4</div>
    </div>
  );
}

AI はモバイルファーストの方法論を理解しており、デスクトップファーストのブレークポイントパターンを使用しようとすると警告します。また、tailwind.config.js の設定に基づいて正しいブレークポイント範囲も提案します。

状態バリアントとインタラクション

ホバー、フォーカス、アクティブな状態は、インタラクティブな要素にとって不可欠です。Cursor は状態バリアントのインテリジェントな提案を提供します：

export function InteractiveButton() {
  return (
    <button className="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 p-0.5 text-sm font-medium text-gray-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 group-hover:from-purple-600 group-hover:to-blue-500">
      <span className="relative rounded-md bg-white px-5 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
        Hover over me
      </span>
    </button>
  );
}

警告

標準的なユーティリティが存在する場合、w-[123px] のような任意の値の過度の使用は避けてください。Cursor は、等価な組み込みユーティリティを持つ一般的な任意の値パターンをフラグし、デザインシステムとの一貫性を保つのを助けます。

カスタム設定とテーマ

すべてのプロジェクトは、Tailwind のデフォルトを超えるカスタマイズを必要とします。Cursor は、完全な IntelliSense サポートを維持しながらテーマ設定を拡張するのを助けます。

カラーとタイポグラフィの拡張

tailwind.config.js を開いて、カスタムデザイントークンを定義します：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Cal Sans', 'Inter', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        'display-xl': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-lg': ['3.75rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],
      },
    },
  },
  plugins: [],
};

保存後、Cursor はすぐにこれらのカスタム値をインデックス化します。bg-brand- と入力すると、完全なカラーパレットが表示され、text-display-xl がフォントサイズの提案に表示されます。

カスタムプラグインとコンポーネント

デザインシステムコンポーネントの場合、Cursor が認識する Tailwind プラグインを作成します：

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ... その他の設定
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.btn': {
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: theme('borderRadius.md'),
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          fontWeight: theme('fontWeight.medium'),
          transitionProperty: theme('transitionProperty.colors'),
          transitionDuration: theme('transitionDuration.150'),
        },
        '.btn-primary': {
          backgroundColor: theme('colors.brand.600'),
          color: theme('colors.white'),
          '&:hover': {
            backgroundColor: theme('colors.brand.700'),
          },
        },
      });
    }),
  ],
};

Cursor の自動補完は、btn と btn-primary を有効なクラス名として含め、ホバープレビューが生成された CSS を表示します。

ヒント

Cursor の AI を使用して、既存の CSS または SCSS ファイルを Tailwind 設定拡張に変換します。レガシースタイルを選択して、「これらのスタイルを Tailwind テーマ拡張とカスタムユーティリティに変換してください」と尋ねてください。

コンポーネント抽出パターン

プロジェクトが成長するにつれて、繰り返されるユーティリティの組み合わせは再利用可能なコンポーネントになるべきです。Cursor の AI は、抽出の機会を特定することに長けています。

抽出候補の特定

このインラインでユーティリティが多いコンポーネントを考えてみましょう：

export function UserProfile() {
  return (
    <div className="flex items-center space-x-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
      <img
        className="h-12 w-12 rounded-full object-cover"
        src="/avatar.jpg"
        alt="User avatar"
      />
      <div className="flex-1">
        <h3 className="text-lg font-semibold text-gray-900">Jane Doe</h3>
        <p className="text-sm text-gray-500">Software Engineer</p>
      </div>
      <button className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700">
        Follow
      </button>
    </div>
  );
}

このコンポーネントを Cursor で選択し、「カードコンテナスタイルを、padding と shadow のバリアントを持つ再利用可能な Card コンポーネントに抽出してください」とプロンプトします。AI は以下を生成します：

// components/Card.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const cardVariants = cva('rounded-lg border border-gray-200 bg-white', {
  variants: {
    padding: {
      none: '',
      sm: 'p-3',
      md: 'p-4',
      lg: 'p-6',
    },
    shadow: {
      none: '',
      sm: 'shadow-sm',
      md: 'shadow-md',
      lg: 'shadow-lg',
    },
  },
  defaultVariants: {
    padding: 'md',
    shadow: 'sm',
  },
});

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {}

export function Card({
  className,
  padding,
  shadow,
  ...props
}: CardProps) {
  return (
    <div
      className={cn(cardVariants({ padding, shadow }), className)}
      {...props}
    />
  );
}

リファクタリングされた UserProfile はよりクリーンでメンテナンスしやすくなります：

export function UserProfile() {
  return (
    <Card className="flex items-center space-x-4">
      <img
        className="h-12 w-12 rounded-full object-cover"
        src="/avatar.jpg"
        alt="User avatar"
      />
      <div className="flex-1">
        <h3 className="text-lg font-semibold text-gray-900">Jane Doe</h3>
        <p className="text-sm text-gray-500">Software Engineer</p>
      </div>
      <button className="rounded-md bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700">
        Follow
      </button>
    </Card>
  );
}

class-variance-authority の使用

class-variance-authority ライブラリは、Tailwind と Cursor と非常に相性が良いです。Cursor の IntelliSense が完全にサポートする型安全なコンポーネントバリアントを提供します。

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-brand-600 text-white hover:bg-brand-700',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
        outline: 'border border-gray-300 bg-transparent hover:bg-gray-50',
        ghost: 'hover:bg-gray-100',
        link: 'text-brand-600 underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-8 px-3 text-xs',
        lg: 'h-12 px-8 text-base',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({
  className,
  variant,
  size,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  );
}

この設定により、Cursor は variant と size props とその利用可能なオプションの自動補完を提供し、コンパイル時に無効な組み合わせを捕捉します。

AI クラス提案

Cursor の最も強力な機能の一つは、自然言語の説明から Tailwind マークアップを生成することです。

説明からコンポーネントを生成する

必要なものを説明すると、Cursor はマークアップを生成します：

プロンプト：

Tailwind クラスを持つ料金カードコンポーネントを作成してください。以下を持つ必要があります：
- 上部に目立つ "Pro" バッジ
- "/month" の大きな価格表示
- チェックマーク付きの 4 つの機能のリスト
- 目立つ CTA ボタン
- 微妙なホバーリフト効果

Cursor が生成：

export function PricingCard() {
  return (
    <div className="relative flex flex-col rounded-2xl border-2 border-brand-500 bg-white p-8 shadow-xl transition-transform duration-300 hover:-translate-y-1">
      <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-brand-500 px-4 py-1 text-sm font-semibold text-white">
        Pro
      </div>
      <div className="mb-6 text-center">
        <span className="text-5xl font-bold text-gray-900">$29</span>
        <span className="text-lg text-gray-500">/month</span>
      </div>
      <ul className="mb-8 space-y-4">
        {[
          'Unlimited projects',
          'Priority support',
          'Advanced analytics',
          'Custom integrations',
        ].map((feature) => (
          <li key={feature} className="flex items-center text-gray-700">
            <svg className="mr-3 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
            </svg>
            {feature}
          </li>
        ))}
      </ul>
      <button className="mt-auto rounded-lg bg-brand-600 py-3 text-center font-semibold text-white transition-colors hover:bg-brand-700">
        Get Started
      </button>
    </div>
  );
}

この機能により、プロトタイピングが劇的に高速化され、Tailwind ドキュメントを閲覧する必要が減ります。

インラインスタイルを Tailwind にリファクタリングする

レガシーコードを移行する際、インラインスタイルを選択して、Cursor に「これらのインラインスタイルを Tailwind ユーティリティクラスに変換してください」と尋ねます。AI は、慣用的な Tailwind マークアップを生成しながら視覚的な外観を保持します。

// 変換前
<div style={{ marginBottom: '24px', padding: '16px', backgroundColor: '#f3f4f6', borderRadius: '8px' }}>

// 変換後
<div className="mb-6 rounded-lg bg-gray-100 p-4">

ヒント

複雑なデザインの場合は、スクリーンショットを貼り付けるか、視覚的な階層構造を説明してください。Cursor は、目的のレイアウトを達成するための適切な flexbox、grid、およびスペーシングユーティリティの組み合わせを提案できます。

ダークモードとテーマ

モダンなアプリケーションにはダークモードのサポートが必要です。Cursor は、マルチテーマ設定の実装とメンテナンスを助けます。

ダークモードの実装

Tailwind 設定でダークモードを有効にします：

module.exports = {
  darkMode: 'class',
  // ... 残りの設定
};

テーマ対応のスタイリングには dark: プレフィックスを使用します：

export function ThemedCard() {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6 text-gray-900 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
      <h2 className="text-xl font-bold">Adaptive Content</h2>
      <p className="mt-2 text-gray-600 dark:text-gray-300">
        This card automatically adjusts to the current theme.
      </p>
    </div>
  );
}

Cursor は、標準的なユーティリティと並行して dark: バリアントを提案し、あるテーマで重要なコントラスト比が失敗する可能性がある場合に警告します。

結論

Cursor での Tailwind CSS 開発は、フロントエンド開発者の生産性における重要な飛躍を表します。ユーティリティファーストのスタイリングと AI 駆動のアシスタンスの組み合わせにより、デザイン実装プロセスから摩擦がなくなります。

このガイドの重要なポイント：

• Cursor がカスタムテーマ値をインデックス化できるように、Tailwind を適切に設定してください
• エディタを離れずにユーティリティを発見するために Cursor の自動補完を使用してください
• class-variance-authority を使用して、繰り返しパターンを型安全なコンポーネントに抽出してください
• 自然言語の説明からの迅速なプロトタイピングのために AI 生成を活用してください
• ダークモードとカスタムデザイントークンで一貫したテーマを維持してください
• 不要な任意の値などのアンチパターンを Cursor にフラグさせてください

これらのテクニックを使用すると、コードベースをメンテナンス可能でスケーラブルに保ちながら、洗練された一貫したインターフェースをより速く提供できます。