TailwindCSS の使用

TailwindCSS の使用

必要な依存関係をインストールする

pnpm install --save-dev tailwindcss postcss autoprefixer

TailwindCSS 構成を設定する

TailwindCSS の初期化コマンドを実行します。

npx tailwindcss init -p

生成postcss.config.js ファイルを TailwindCSS プラグインと統合し、スタイルが適切に処理されるようにします。
作成tailwind.config.js して、スキャンモード、テーマの構成、プラグインの統合を指定します。

TailwindCSS がパッケージ化プロセス中に関連スタイルをコンパイルできるようにするには、tailwind.config.js で content フィールドを適切に設定する必要があります。たとえば、 src ディレクトリ内の .vue、 .js、 .ts で始まるすべてのファイルをスキャンします。 .jsx または .tsx で終わるファイル:

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

テイルウィンドの紹介

创建 tailwind.css 文件：

/* 整合 Tailwind 指令 */
@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.ts 中引入：

import "@/style/tailwind.css"

Tailwind 設定の外部で変数を使用します。

公式ドキュメントリファレンス - Tailwind CSS

一部のシナリオでは、Tailwind 構成にない特定の値を使用する必要がある場合があります。

<div class="w-[139px] h-[77px] bg-[#165DFF]"></div>

アドバンテージ：

開発者は、HTML と CSS を切り替えることなく、一貫したワークフローを維持できます。
1 つのクラス定義で生成されるスタイルルールは 1 つだけであり、これを複数回使用した場合でも最終的な CSS 出力を最適化できます。

注: これは便利ですが、マジック値を頻繁に使用すると、デザインの一貫性から逸脱する可能性があります。過度に依存すると、将来のメンテナンスが複雑になる可能性があります。

カスタムクラスの作成

使用 @apply 指令：

.menu {
    
    
	@apply p-2 text-gray-900 font-semibold;
}

.menu-item {
    
    
	@apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900;
}

予防：

@apply ディレクティブはスタイルをモジュール化できますが、初期の抽象化は避けることをお勧めします。過度に使用すると、最終的な CSS ファイルのサイズが増加する可能性があります。
カスタムクラスの代わりに、組み込みの Tailwind ツールと反復プロセスを使用することをお勧めします。

Tailwind によるレスポンシブデザイン

レスポンシブデザイン – Tailwind CSS

例：

<div class="w-32 h-32 bg-green-500 md:bg-blue-500" />

このコードの意味: デフォルトでは緑色を表示しますが、幅が 768 ピクセル以上の画面では青色を表示します (md ブレークポイント)。

Tailwind のデフォルト設定をオーバーライドする

構成：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    
    
  theme: {
    
    
    extend: {
    
    
      textColor: {
    
     
        primary: '#1D2129',
        regular: '#4E5969',
        secondary: '#86909C',
        disabled: '#C9CDD4',
      }
    },
  },
  // 更多配置...
}

応用：

<span class="text-primary">主色调</span>
<span class="text-regular">标准色</span>
<span class="text-secondary">次色调</span>
<span class="text-disabled">禁用色</span>

ダークモードの統合

ダークモード – Tailwind CSS

在 tailwind.config.js 中配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
    
    
  darkMode: 'class',
  // 其他配置...
}

応募方法：

<div class="w-32 h-32 bg-blue-500 dark:bg-green-500"></div>

予防：

TailwindCSS と antd design vue 間の潜在的な競合:

たとえば、TailwindCSS を統合すると、antd design vue のボタンが透明になる場合があります。

解決策:TailwindCSS のデフォルトのプロパティを無効にします。

// tailwind.config.js
module.exports = {
    
    
  // 其他配置...
  corePlugins: {
    
    
    preflight: false
  }
}