# Topページの作成1

ではまずTopページを作成していきましょう。

branchを切り替えます。

```bash
git switch -c feature/top-page
```

今回スタイリングは、tailwindcssを用います。以下サイトを参考にインストールしていきましょう。

{% embed url="<https://tailwindcss.com/docs/installation>" %}

最初に以下コマンドを実行し、tailwindcssのライブラリをインストールします。

```bash
npm install -D tailwindcss
```

次に以下コマンドを実行し、tailwindのセットアップを行います。

```tsx
npx tailwindcss init
```

そうすると、`tailwind.config.js`というファイルが作成されますので、以下のように修正します。

<pre class="language-javascript" data-title="tailwind.config.js◎"><code class="lang-javascript">/** @type {import('tailwindcss').Config} */
export default {
<strong>  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
</strong>  theme: {
    extend: {},
  },
  plugins: [],
};
</code></pre>

次に、`styles/index.css`に以下を記述します。

{% code title="styles/index.css◎" %}

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

{% endcode %}

ここで、`main.tsx`にて、`styles/output.css`をimportし、コンポーネント内にてtailwindが当たるようにタグを記述します。（`styles/output.css`はまだ作成しなくて大丈夫です。)

<pre class="language-tsx" data-title="main.tsx◎"><code class="lang-tsx">import React from 'react'
import ReactDOM from 'react-dom/client'
import './styles/index.css'
<strong>import "./styles/output.css"
</strong>import "./styles/destyle.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
<strong>  &#x3C;React.StrictMode>
</strong><strong>    &#x3C;h1 className="text-3xl font-bold underline">Hello world!&#x3C;/h1>
</strong><strong>  &#x3C;/React.StrictMode>
</strong>);
</code></pre>

こちらで、`npm run dev` にて起動し確認すると、まだスタイリングが当たっていないことが確認できます。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FPozVIEVbdfSILl2FT4Ma%2Fb.png?alt=media&#x26;token=e44fd772-3be1-405a-a7e2-76a5608f9761" alt=""><figcaption></figcaption></figure>

この状態で、WarpにてReactが起動しているコンソールで、`Command` + `T`をおし、`calendar-project`内にいる状態のコンソールを開き、以下のコマンドを叩きます。

```bash
npx tailwindcss -i ./src/styles/index.css -o ./src/styles/output.css --watch
```

そうすると、`styles/output.css`というファイルが作成され、最下部に以下のような記述がされているかと思います。

{% code title="styles/output.css" %}

```css
...

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.underline {
  text-decoration-line: underline;
}
```

{% endcode %}

これは先ほどのコマンドにて、`tailwind.config.js`の`content`で指定したテンプレートファイルをチェックし、使用されているtailwindのclass名のみを自動で作成（ビルド）してくれたものになります。このように、使用されているclass名のみですので、最小限のcssファイルになり、処理も軽くなるような仕様になってます。

ちなみに、先ほどのコマンドは`-i`オプションは参照するcssファイルで、`@tailwind base;...`を記述しているファイルになります。`-o`オプションは出力するcssファイルで、`./src/styles/output.css`と指定しています。`--watch`に関しては、テンプレートファイルにてtailwindのclass名を使用するたびに自動で、cssをbuildしてくれます。

ですので動作確認をする際には、`npm run dev`と共に一緒に叩いておきましょう。

そして、先ほど、`main.tsx`にてstyles/output.cssをimportしているので、main.tsxにスタイリングが当たっているかと思います。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FKQTElVCzToBuizqLVlMO%2Fg.png?alt=media&#x26;token=deca7b02-faed-4a55-9c4a-5ab466a3cfa0" alt=""><figcaption></figcaption></figure>

ちなみに、各class名のスタイリングは以下になります(output.cssにて確認できます）。

* text-3x　`fontsize: 30px`
* font-bold　`font-weight: 700`
* underline  `text-decoration-line: underline`

では、これでcommitしましょう。

```bash
git add .
```

```bash
git commit
```

コミットメッセージは以下とします。

```
feat: tailwindcssを導入
```