Tailwind CSS 設定

Tailwind CSS のコア設定ファイルは次のとおりですtailwind.config.js。

tailwind.config.js は Tailwind CSS の設定ファイルであり、Tailwind のデフォルト設定をカスタマイズするために使用します。

tailwind.config.js ファイルを変更することで、開発者は色、間隔、フォント、ブレークポイントなどのデザインシステムをカスタマイズし、特定のプロジェクトのニーズを満たすことができます。

設定ファイルの作成

Tailwind CSS の CLI ツールを使用すると、基本的な tailwind.config.js ファイルをすばやく生成できます。

プロジェクトのルートディレクトリで次のコマンドを実行します：

npx tailwindcss init

これにより、基本設定を含む tailwind.config.js ファイルが作成されます。

基本構造

以下は、典型的な tailwind.config.js ファイルの構造です：

上記のコードは、Tailwind CSS に src ディレクトリ内のすべての .html、.js、.vue ファイルをスキャンするように指示します。

主な設定項目

1、テンプレートパスの設定：content

content: [
  "./index.html", // 单文件路径
  "./src/**/*.{html,js,ts,jsx,tsx}", // 包含多个文件类型的路径
],

これは、Tailwind CSS に src ディレクトリ内のすべての .html、.js、.ts\.jsx、.tsx ファイルをスキャンするように指示します。

content フィールドは、Tailwind のテンプレートファイルパスを指定するために使用します。Tailwind はこれらのファイルをスキャンして必要なスタイルを生成し、生成される CSS ファイルのサイズを削減します。テンプレートファイルで使用されているスタイルのみを生成し、未使用のスタイルが最終出力にコンパイルされるのを防ぎます。

2、テーマのカスタマイズ：theme

theme セクションでは、色、フォント、間隔、ボーダーのサイズなどを定義できます。

たとえば、デフォルトの色を拡張したり、新しい色を追加したりできます：

theme: {
  extend: {
    colors: {
      cyan: '#9CDBFF',
    }
  }
}

これにより、cyan という名前の新しい色が追加され、プロジェクト内で bg-cyan のようなクラス名を使用できます。

theme.colors を使用して色を定義し、スタイル内で参照します。

theme: {
  extend: {
    colors: {
      brand: {
        light: '#93C5FD',
        DEFAULT: '#3B82F6',
        dark: '#1E40AF',
      },
    },
  },
}

darkMode を使用して Tailwind のダークモードサポートを有効にします。

module.exports = {
  darkMode: 'class', // 或 'media'
  theme: {
    extend: {
      colors: {
        background: {
          light: '#FFFFFF',
          dark: '#000000',
        },
      },
    },
  },
}

3、バリアントの設定：variants

variants オプションを使用すると、どの状態（hover、focus など）を最終的な CSS に含めるかを定義できます。

デフォルトのバリアントを拡張または上書きできます：

variants: {
  extend: {
    borderColor: ['focus-visible'],
    opacity: ['disabled'],
  }
}

4、プラグインの使用：plugins

plugins オプションを使用すると、カスタムユーティリティクラスを追加できます。

これらのプラグインは、Tailwind CSS 公式が提供するものか、コミュニティが作成したもののいずれかです。形式は次のとおりです：

plugins: [
  require('some-tailwindcss-plugin')
]

プラグイン使用の例：

コミュニティプラグインの導入：

Tailwind CSS 設定

デフォルトでは、Tailwind はプロジェクトのルートディレクトリで tailwind.config.js ファイルを探します。このファイルに必要な設定情報を記述できます：

次の表に、tailwind.config.js ファイルの設定オプションと使用説明を示します：

tailwind.config.js を使用すると、Tailwind CSS の機能とスタイルを簡単にカスタマイズし、さまざまなデザインニーズに対応できます。拡張（extend）、プラグイン（plugins）、テーマ設定（theme）などの機能を適切に活用することで、プロジェクトの開発効率とスタイルの柔軟性を大幅に向上させることができます。