やりたいこと
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あたりが最近多く使われているような気がしたのでこの辺も使いこなせるようになりたいですね。