tailwindcss-plugins

Tailwind CSS プラグイン

公式プラグイン

@tailwindcss/typography

Markdown や CMS コンテンツなど、制御できないコンテンツに美しいタイポグラフィのデフォルトスタイルを適用します。

インストール

npm install -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

基本的な使い方

<article class="prose">
  <h1>Article Title</h1>
  <p>This content gets beautiful default styles...</p>
</article>

サイズ修飾子

クラス	説明
prose-sm	小さめのテキスト（基本サイズ 14px）
prose	デフォルト（基本サイズ 16px）
prose-lg	大きめのテキスト（基本サイズ 18px）
prose-xl	特大のテキスト（基本サイズ 20px）
prose-2xl	さらに大きなテキスト（基本サイズ 24px）

<article class="prose md:prose-lg lg:prose-xl">
  
</article>

カラーテーマ

<article class="prose prose-slate">Gray theme</article>
<article class="prose prose-zinc">Zinc theme</article>
<article class="prose prose-neutral">Neutral theme</article>
<article class="prose prose-stone">Stone theme</article>

ダークモード

<article class="prose dark:prose-invert">
  
</article>

要素修飾子

特定の要素を上書きします。

<article class="
  prose
  prose-headings:text-blue-600
  prose-a:text-blue-500
  prose-a:no-underline
  prose-code:text-pink-500
  prose-img:rounded-lg
  prose-strong:text-gray-900
  prose-blockquote:border-blue-500
">
  Content
</article>

最大幅の制御

<article class="prose max-w-none">
  Full width content
</article>

prose スタイルの除外

<article class="prose">
  <h1>Styled heading</h1>
  <p>Styled paragraph</p>

  <div class="not-prose">
    
    <CustomComponent />
  </div>

  <p>Back to prose styles</p>
</article>

カスタムクラス名

@plugin "@tailwindcss/typography" {
  className: wysiwyg;
}

<article class="wysiwyg">Content</article>

@tailwindcss/forms

フォーム要素を、統一されたスタイル設定しやすい基本スタイルにリセットします。

インストール

npm install -D @tailwindcss/forms

@import "tailwindcss";
@plugin "@tailwindcss/forms";

スタイルが適用される要素

このプラグインは、次の要素にスタイルを適用します。

• input[type='text']
• input[type='email']
• input[type='password']
• input[type='number']
• input[type='url']
• input[type='date']
• input[type='datetime-local']
• input[type='month']
• input[type='week']
• input[type='time']
• input[type='search']
• input[type='tel']
• input[type='checkbox']
• input[type='radio']
• select
• select[multiple]
• textarea

基本的な使い方

<input type="email" class="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">


<select class="rounded-lg border-gray-300">
  <option>Option 1</option>
  <option>Option 2</option>
</select>


<input type="checkbox" class="rounded text-blue-500 focus:ring-blue-500">


<input type="radio" class="text-blue-500 focus:ring-blue-500">


<textarea class="rounded-lg border-gray-300" rows="4"></textarea>

戦略：クラスベース

オプトインでスタイルを適用する場合（グローバルなリセットは適用されません）。

@plugin "@tailwindcss/forms" {
  strategy: class;
}

<input type="text" class="form-input rounded-lg">
<select class="form-select rounded-lg">
<textarea class="form-textarea rounded-lg">
<input type="checkbox" class="form-checkbox rounded">
<input type="radio" class="form-radio">

フォームクラス一覧

クラス	要素
form-input	テキスト入力欄
form-textarea	テキストエリア
form-select	セレクトボックス
form-multiselect	複数選択セレクトボックス
form-checkbox	チェックボックス
form-radio	ラジオボタン

チェックボックス／ラジオボタンのスタイル設定

<input type="checkbox" class="rounded text-pink-500">


<input type="checkbox" class="accent-purple-600">


<input type="checkbox" class="h-6 w-6 rounded text-blue-500">

@tailwindcss/container-queries

ビューポートではなく、要素のコンテナサイズに基づいてスタイルを設定します。

インストール

npm install -D @tailwindcss/container-queries

@import "tailwindcss";
@plugin "@tailwindcss/container-queries";

基本的な使い方

<div class="@container">
  
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <div class="@sm:text-lg @md:text-xl">
      Responsive to container, not viewport
    </div>
  </div>
</div>

コンテナのブレークポイント

プレフィックス	幅
@xs	320px
@sm	384px
@md	448px
@lg	512px
@xl	576px
@2xl	672px
@3xl	768px
@4xl	896px
@5xl	1024px
@6xl	1152px
@7xl	1280px

名前付きコンテナ

<div class="@container/sidebar">
  
  <div class="@md/sidebar:flex">
    Only flex when sidebar container is md
  </div>
</div>

<div class="@container/main">
  <div class="@lg/main:grid-cols-3">
    Grid when main container is lg
  </div>
</div>

任意のコンテナ値

<div class="@container">
  <div class="@[400px]:flex @[600px]:grid">
    Arbitrary breakpoint values
  </div>
</div>

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

CSS のみのユーティリティ

シンプルなユーティリティには、JavaScript プラグインの代わりに @utility ディレクティブを使用します。

/* In your CSS file */
@utility content-auto {
  content-visibility: auto;
}

@utility text-balance {
  text-wrap: balance;
}

@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@utility scrollbar-none::-webkit-scrollbar {
  display: none;
}

JavaScript プラグイン

JavaScript が必要な複雑なプラグインの場合：

// plugins/my-plugin.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addUtilities, addComponents, matchUtilities, theme }) {
  // Add static utilities
  addUtilities({
    '.content-auto': {
      'content-visibility': 'auto',
    },
    '.text-balance': {
      'text-wrap': 'balance',
    },
  })

  // Add components
  addComponents({
    '.btn': {
      padding: theme('spacing.2') + ' ' + theme('spacing.4'),
      borderRadius: theme('borderRadius.lg'),
      fontWeight: theme('fontWeight.medium'),
    },
    '.btn-primary': {
      backgroundColor: theme('colors.blue.500'),
      color: theme('colors.white'),
      '&:hover': {
        backgroundColor: theme('colors.blue.600'),
      },
    },
  })

  // Add dynamic utilities
  matchUtilities(
    {
      'text-shadow': (value) => ({
        textShadow: value,
      }),
    },
    { values: theme('textShadow') }
  )
})

CSS で読み込みます。

@import "tailwindcss";
@plugin "./plugins/my-plugin.js";

テーマ拡張を含むプラグイン

// plugins/gradients.js
import plugin from 'tailwindcss/plugin'

export default plugin(
  function({ matchUtilities, theme }) {
    matchUtilities(
      {
        'text-gradient': (value) => ({
          backgroundImage: value,
          backgroundClip: 'text',
          color: 'transparent',
        }),
      },
      { values: theme('textGradient') }
    )
  },
  {
    theme: {
      textGradient: {
        primary: 'linear-gradient(to right, #667eea, #764ba2)',
        secondary: 'linear-gradient(to right, #f093fb, #f5576c)',
        sunset: 'linear-gradient(to right, #fa709a, #fee140)',
      },
    },
  }
)

カスタムバリアントの追加

// plugins/variants.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addVariant }) {
  // Peer states
  addVariant('peer-checked', ':merge(.peer):checked ~ &')

  // Group states
  addVariant('group-focus-visible', ':merge(.group):focus-visible &')

  // Data attributes
  addVariant('data-active', '&[data-active="true"]')
  addVariant('data-loading', '&[data-loading]')

  // Custom selectors
  addVariant('hocus', ['&:hover', '&:focus'])
  addVariant('not-first', '&:not(:first-child)')
  addVariant('not-last', '&:not(:last-child)')
})

コミュニティプラグイン

人気のプラグイン

プラグイン	説明
tailwindcss-animate	アニメーションユーティリティ
tailwindcss-motion	高度なモーション／アニメーション
@headlessui/tailwindcss	Headless UI のバリアント
tailwind-scrollbar	スクロールバーのスタイル設定
tailwindcss-3d	3D 変換ユーティリティ
tailwindcss-fluid-type	流動的なタイポグラフィ

tailwindcss-animate

npm install -D tailwindcss-animate

@plugin "tailwindcss-animate";

<div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
  Animated content
</div>

<div class="animate-out fade-out slide-out-to-top-4 duration-300">
  Exiting content
</div>

ベストプラクティス

1. 必要なものだけを読み込む

/* Only load plugins you actually use */
@plugin "@tailwindcss/typography";
/* @plugin "@tailwindcss/forms"; -- commented out if not using */

2. まず CSS ユーティリティを使う

JavaScript プラグインを作成する前に、@utility ディレクティブを試します。

/* Simple custom utility - no JS needed */
@utility glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

3. カスタムプラグインを文書化する

/**
 * @name Text Gradient Plugin
 * @description Adds text gradient utilities
 * @usage class="text-gradient-primary"
 */
export default plugin(...)

4. プラグインの互換性をテストする

Tailwind をアップグレードする際は、すべてのプラグインが新しいバージョンで動作することを確認します。

npm outdated | grep tailwind
npm update @tailwindcss/typography @tailwindcss/forms