【初学者】React + TypeScript + Tailwind CSS + daisyUI の初期設定手順

# はじめに
お疲れさまです。
おおくまです。

以下は、**React + TypeScript + Tailwind CSS + daisyUI** の初期設定の手順になります。
備忘録として残したいと思います。

# 注意点
:::note warn
私はプログラミング学習中で、初学者です。
内容に誤りがある場合があります。
コメント等で教えていただけると幸甚です。
:::

# 手順
```:ターミナル
npm install -g create-react-app
```
**Create React App**というツールをインストールします。

<br>

```:ターミナル
npx create-react-app example --template typescript
```
**Create React App**を使用して、**TypeScriptテンプレート**を持つ新しいReactプロジェクトを作成します。

<br>

```:ターミナル
cd example
npm install -D tailwindcss
npx tailwindcss init
```
**tailwindcss**をインストールし、``tailwind.config.js``ファイルを作成します。

<br>

```diff_javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
+   "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
``tailwind.config.js``ファイルにすべてのテンプレートファイルのパスを追加します。

<br>

```diff_css:index.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
```
tailwindディレクティブを``index.css``ファイルに追加します。

<br>

ここで一旦、**Tailwind**がきちんと導入できているか確認してみます。

<br>

```:ターミナル
npm run start
```

![スクリーンショット 2023-10-02 15.04.11（2）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/6378caa5-cf82-e6c6-4c49-e5a2f17e1962.jpeg)
初期設定だとこのような画面になっているかと思いますので、少し手を加えてみます。

```diff_typescript:App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
+       <p className='text-5xl underline'>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```
![スクリーンショット 2023-10-02 15.21.15（2）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/60e2c084-fc81-a7cd-5bb3-47cf1bb3d295.jpeg)
文字が大きくなって、アンダーラインが引かれていればOKです。

<br>

次に**daisyUI**の設定をします。

<br>

```:ターミナル
npm i -D daisyui@latest
```
**daisyUI**をインストールします。

<br>

```diff_javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
+ plugins: [require("daisyui")],
}
```
``tailwind.config.js``ファイルに**daisyUI**を追加します。

<br>

**daisyUI**が反映できているか確認します。
```diff_typescript:App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
+       <p className='btn text-5xl underline'>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

```:ターミナル
npm run start
```
![スクリーンショット 2023-10-02 15.30.50（2）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/04e1e184-11b6-3679-eaaf-7d06a14d58bc.jpeg)
このような画面になっていればOKです。

<br>

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