このコマンド 1 つで Vite プロジェクトに Tailwind をセットアップします

皆さん、Vite プロジェクトで追い風を設定するには 2 ～ 3 ステップかかる場合があります。 
たとえば、Vite React では、

• 追い風を取り付ける必要があります。
• 構成ファイルを生成します。
• これらのファイルにテンプレートを追加します。

しかし、プロジェクト内の 1 つのコマンドで Tailwind をセットアップする npm パッケージを作成しました。 Tailwind がインストールされ、構成ファイルが生成され、テンプレートが自動的に追加されます。

インストール:

npm install -g lazywind

パッケージをグローバルにインストールします。 

その後、実行します

lazywind

プロジェクト ディレクトリでこのコマンドを実行します。

例:

次に、Vite を使用して React プロジェクトをセットアップしましょう

セットアップ反応、

npm create vite@latest client -- --template react

cd client

npm install

React をセットアップして依存関係をインストールした後、以下を使用してプロジェクトを実行できます。

npm run dev

Lazywind で Tailwind をセットアップする

Lazywind がグローバルにインストールされたことを願っています。次に、プロジェクト フォルダーで Lazywind を実行します。たとえば、この場合は client がフォルダーです。

そうなります

• Tailwind CSS をインストールします
• tailwind.config.js ファイルと postcss.config.js ファイルを生成します
• 必要なテンプレートを追加します。

たった 1 つのコマンドで完了です。

パッケージリンク: https://www.npmjs.com/package/lazywind

Tailwind のセットアップはこれで完了です。試してみて、フィードバックをお聞かせください - ぜひお聞かせください!

以上がこのコマンド 1 つで Vite プロジェクトに Tailwind をセットアップしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。