viteとバニラJSとTailWindCSSでフロントエンドの環境構築をしてみる

スポンサーリンク

ビルドツールにVite、cssフレームワークにTailWindCSSを使用してフロントエンドの環境構築をしてみました。

スポンサーリンク

viteでプロジェクトを作成する

プロジェクトの作成にはViteを使いました。次のようにnpmコマンドを入力すると対話形式でプロジェクトの作成が始まります。(npmコマンドを使用するには、Node.jsのインストールが必要です。)

プロジェクトの名前、パッケージの名前、使用するフレームワーク、使用する言語を選択するとプロジェクトが作成されます。今回はパッケージの名前はデフォルトのままで使用するフレームワークと言語はバニラJSを選択しました。

作成したプロジェクトのフォルダに移動をし、パッケージをインストールします。

以下のようなフォルダ構成でプロジェクトが作成されます。

CSSフレームワークのTailWindCSSをPostCSSプラグインとしてインストールする

npmを利用してTailWindCSSをインストールします。今回はTailWindCSSをPostCSSプラグインとして使用するのでPostCSSとPostCSSのプラグインのAutoprefixerも一緒にインストールします。AutoprefixerはCSSを解析し、CanIUseの値を使用してCSSルールにベンダープレフィックスを追加するプラグインです。

設定ファイルの作成と設定

TailWindCSSとPostCSSの設定ファイルを作成します。下記のコマンドを実行するとtailwind.config.cjsとpostcss.config.cjsが作成されます。

tailwind.config.cjsファイルを開き、contentの設定項目にTailWindCSSを使用したいファイルへのパスを追加します。

続いてstyle.cssファイルを開きTailwindディレクティブを追加します。

開発サーバーを起動させる

下記のコマンドを実行すると開発サーバーが起動されます。

index.htmlにTailwindのユーティリティクラスを使用して、コンテンツのスタイルを設定すると反映されていることが確認できます。

ビルド

viteでビルドしたindex.htmlファイルはcssファイルなどをデフォルトではルートパスで読み込む設定になっているので、相対パスで読み込みするように設定を変えました。

プロジェクトルートにvite.config.jsファイルを作成して設定オプションを追記します。

下記コマンドを実行するとビルドが開始され、distフォルダにビルドされたファイルが生成されます。

ここまでのファイル構成は以下になります。

最後までお読みいただきありがとうございました。

タイトルとURLをコピーしました