TS×React Tailwind CSS + daisyUIの環境構築

# 投稿目的
<ul>
<li>環境構築の備忘録</li>
</ul>


# 本記事について
現場で<a href="https://tailwindcss.com/" target="_blank">`Tailwind CSS`(公式)</a> と<a href="https://daisyui.com/" target="_blank">`daisyUI`(公式)</a>の環境構築を行いました。
その時の備忘録・手順を残しておきます。
<a href="https://stackblitz.com/edit/vitejs-vite-rvhnx7?file=src%2Fpages%2FaboutTailwind%2Fcomponents%2FTailwindPage.tsx" target="_blank">`Stack Blitz`(外部)</a>を用いて簡単に環境構築してみたので、見に行ってみてください~

なお、`Tailwind CSS` `DaisyUI`の説明については割愛します...


# 前提
Typescript × Reactのアプリケーションに`Tailwind CSS`をインストールしていきます。
``` 当初のpackage.json(抜粋)
"dependencies": {
    ...
    "react": "^18.2.0",
    "typescript": "^4.9.5",
    ...
},
```


# 手順(`Tailwind CSS` `DaisyUI`が使えるようになるまで)
### ① `Tailwind CSS` `Post CSS` `Autoprefixer` `daisyUI` のインストール
```bash
$ yarn add -D tailwindcss postcss　postcss-cli autoprefixer daisyui@latest
```
↓
```package.json
"devDependencies": {
    ...
    // 新規追加
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4",
    "daisyui": "^4.12.10",
    ...
}
```

### ②`tailwind.config.js` `postcss.config.js`の作成
```bash
$ npx tailwindcss init -p
```
↓
```
my-project
|--src - ...
|
|--package.json
|--...
|--tailwind.config.js // 新規追加
|--postcss.config.js // 新規追加
```

### ③`tailwind.config.js`の編集
```tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    // ★追記
	content: ["./src/**/*.{js,ts,jsx,tsx}"],
	theme: {
		extend: {}
	},
     // ★追記
	plugins: [require("daisyui")]
};

```
`postcss.config.js`の方は特に編集しなくてOKでした。
```postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

### ④ `src/index.css`の作成と`index.html`への追記
```index.css
// 追記
@tailwind base;
@tailwind components;
@tailwind utilities;
```
＋
```index.html
...
<!-- 追記 -->
<link rel="stylesheet" type="text/css" href="index.css" />
...
```

### ⑤ローカル起動時にCSSモジュールがビルドされるようにする
もともと、`yarn dev`コマンドで`vite`がアプリケーションを立ち上げてくれる設定になっていました。
```もともとのpackage.json
"scripts": {
    "dev": "PORT=3000 vite",
    ...
},
```
`yarn dev`時にCSSもビルドしてくれるようにして、アプリケーション起動時にスタイルが適用されるようにいじっていきます。
```編集後のpackage.json
"scripts": {
    // ★追記
    "dev": "yarn build && PORT=3000 vite",
    // ★追記
    "build": "tsc -b && vite build && yarn tailwind-build",
    // ★追加
    "tailwind-build": "postcss src/index.css -o index.css"
},
```
`yarn dev`コマンドを実行すると、
> ①`yarn build`が実行される
> > ①-1 `tsc`が`Typescript`を`Javascript`として読み込めるようにコンパイルする
> > ①-2 `vite`がアプリケーションをビルドしてくれる
> > ①-3 `yarn tailwind-build`が実行される
> > > ①-3-a `postcss`が`src/index.css`をもとに`index.css`を出力する
> > >     →`index.html`に`index.css`が適用される
>
> ②3000番ポートで、`vite`がアプリケーションを立ち上げてくれる

立ち上がったアプリケーションを見てみると、`Tailwind CSS`が動作していることがわかると思います。

```TailwindPage.tsx
import { FC, memo } from 'react';

export const TailwindPage: FC = () => {
  return (
    <div className="bg-slate-500">
      <h1 className="text-white">Tailwind CSSでスタイル当ててみた</h1>
    </div>
  );
};
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519885/e03b4168-1a21-2273-4fd1-10c82cd483f3.png)

```DaisyuiPage.tsx
import { FC, memo } from 'react';
import { useNavigate } from 'react-router-dom';

export const DaisyuiPage: FC = () => {
  const navigate = useNavigate();

  return (
    <div className="bg-slate-100">
      <button
        className="btn btn-primary"
        onClick={() => navigate('/aboutTailwind')}
      >
        DaisyUIのボタン
      </button>
    </div>
  );
};
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519885/b04ee248-c739-71ae-69c7-522a9c4e42d5.png)


# まとめ
現場で環境構築した際は、手順の③~⑤がよく分からず苦戦しました...
が、一度`Tailwind CSS`が適用されるまでの仕組みを理解できると結構簡単に行けました！

環境構築に苦戦している方の助けになると幸いです~
「こうすればより簡単」「ここはこうすべき」などございましたら、ご指摘いただけますと幸いです！