Tailwind CSS 上級テクニック

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。この記事では、中級者向けのテクニックを紹介します。

カスタムクラスの作成

@applyディレクティブを使って、よく使うクラスの組み合わせをカスタムクラスとして定義できます：

```css .btn-primary { @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors; } ```

レスポンシブデザイン

Tailwindのブレークポイントを活用したレスポンシブデザイン：

```tsx

ダークモードの実装

dark:プレフィックスを使ってダークモードを実装：

```tsx

カスタムプラグインの作成

再利用可能なコンポーネントスタイルをプラグインとして定義：

```javascript // tailwind.config.js module.exports = { plugins: [ function({ addComponents }) { addComponents({ '.card': { padding: '1rem', borderRadius: '0.5rem', boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)', }, }) }, ], } ```

まとめ

Tailwind CSSの高度な機能を活用することで、より効率的で保守性の高いスタイリングが可能になります。これらのテクニックを実践して、美しいUIを構築しましょう。