やりたいこと

VS Codeで Viteを使用して、React, Tailwind CSS, Swiperを使える環境を作りたいです。

環境構築

node.js は既にインストールしてあることを前提で進めていきます。

Vite + React をインストール

npm create vite@latest "プロジェクト名" --template

Reactを選択する

今回は JavaScript を選択

インストールが完了したら生成されたフォルダに移動して

npm install -D vite

これで純粋なVite + Reactの環境が完成しました。

ライブラリをインストールしていく

今回は Tailwind CSS と Swiper を使いたいのでその２つをインストールしていきます。

Swiperのインストール

npm i swiper

これだけでSwiperが使えるようになります。

Tailwind CSSのインストール

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm~の方で必要なライブラリをダウンロードしてnpx~の方でconfigなどなどを初期化してくれます。

その後、 tailwind.config.js の中を以下のように書き換えます。

export default {
  //この部分を書き加えた
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

さらに、 index.cssに以下の文を書き加えます。

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

以上で Vite + Reactの環境で Tailwind CSS, Swiperが使えるようになります。

最後に

純粋なHTML CSS JavaScriptで簡単なサイトは書いてみたものの、モダンJSを優先的に勉強した方がいいと思ったのでReactから手をつけてます。元々Reactだけ学ぼうと思ってましたが、いろんなサイトを見てると、Swiper, GSAPあたりが最近多く使われているような気がしたのでこの辺も使いこなせるようになりたいですね。