tailwind material 3

追い風材料3

Tailwind Material 3は、Tailwind CSSユーザーにすぐに使用できるUIコンポーネントを提供するライブラリです。これには、ボタン、カード、フォームなどのさまざまなカスタマイズ可能なコンポーネント、有用なユーティリティやヘルパーが含まれています。 Tailwind Material3のインストール3は、次のことを実行するのと同じくらい簡単です

ターミナルのコマンド：

 npm i tailwind-materilal-3

ライブラリは積極的に維持および更新されており、最新かつ最大のUIコンポーネントに常にアクセスできるようにします。試してみて、UI開発プロセスの合理化にどのように役立つかを確認してください！

使い方

Tailwind Material 3を使用するには、最初にプロジェクトにTailwind CSSがインストールされていることを確認してください。次に、ライブラリから目的のコンポーネントをインポートし、HTMLコードで使用します。

指示に従ってください

ステップ1

NPM経由でtailwindcssをインストールし、 tailwind.config.jsファイルを作成します。

npm install -D tailwindcss
npx tailwindcss init

ステップ2

NPM経由でtailwind-material-3をインストールします。

npm i tailwind-material-3 tailwind-material-colors

ステップ3

tailwind.config.jsファイルに、すべてのテンプレートファイル、色、その他の構成にパスを追加します。

 const { default : useMD3 } = require ( 'tailwind-material-3' ) ;

module . exports = useMD3 ( {
  content : [ "./src/**/*.{html,js}" ] ,
  theme : {
    colors : {
         primary : "#9cd67d" ,
         blue : "#8116f3" ,
      } ,
    extend : { } ,
  } ,
  plugins : [ ] ,
} )

ステップ4

Tailwindの各レイヤーの@tailwindディレクティブをメインCSSファイルに追加します。

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

ステップ5

HTMLコードでコンポーネントの使用を開始してください！

 < body >
  < div class =" p-4 " >
        < button class =" filled-btn " > filled-btn </ button >      
        < button class =" filled-btn " disabled > disabled filled-btn </ button >
        < button class =" filled-tonal-btn " > filled-tonal-btn </ button >
        < button class =" outlined-btn " > outlined-btn </ button >
  </ div >
</ body >

それでおしまい！これで、Tailwind Material 3を使用してUI開発プロセスを合理化する方法を知っています。試してみて、美しく機能的なインターフェイスを構築するための時間と労力を節約するのに役立つ方法を確認してください。ご質問やフィードバックがある場合は、お気軽にご連絡ください。ハッピーコーディング！