Next.js(JavaScript,TypeScript)でTailwindCSSを導入してみた


最近TailwindCSSというCSSフレームワークがあることを知り、
良い開発体験ができるということなので使用してみました。
#TailWindCSSとは
* UtilityFirstというアプローチでスタイルを組むことができるCSSフレームワーク。

:::note info
UtiltyFirstとは？

TailwindCSSがたくさんClassを用意してくれているため、classに命名を考えなくてもよい。(TailWindCSSで用意されたクラスをベースにデザインを整える）
:::

* レスポンシブやダークモードにも簡単に対応できる
* JITモードを有効にすることによる、開発時のブラウザパフォーマンス向上、ビルドタイムの高速化

Class名を考えるのが苦手な自分にとって命名しなくても書けるのは
とても嬉しいです（笑）

#導入

それでは本題に入り、Next.jsに導入していきましょう。

新しくプロジェクトを作成する場合、以下のコマンドでTailWindCSSが搭載されたプロジェクトが作成できます。

```
npx create-next-app -e with-tailwindcss my-project
cd my-project
```
プロジェクト構造は以下の通りです。
```
├── pages
├── public
├── node_modules
├── .gitignore
├── README.md
├── postcss.config.js
├── package.json 
├── tailwind.config.js
└── yarn.lock
```
page/index.jsを確認してみましょう。

```
     <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
        <h1 className="text-6xl font-bold">
          Welcome to{' '}
          <a className="text-blue-600" href="https://nextjs.org">
            Next.js!
          </a>
        </h1>
```
ちゃんとTailWindCSSが導入されています！！

それではブラウザで確認してみましょう。

```
# npm 
npm run dev
# yarn
yarn dev
```
以下のようなページが表示されていれば導入成功です！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2219999/ace1092d-3552-4bd3-d04e-819557d1a7c7.png)

#Next.js(TypeScript）でTailWindCSSを導入する
TypeScriptでも導入してみようとしたところ、公式のサンプルはJavaScirptのみということだったため、一からTailwindCSSを導入していきます。

 まずはお決まりのプロジェクト作成

```
npx create-next-app myProject -typescript 
```

プロジェクトが作成できたら、プロジェクト内にTailwindとPostcssとautoprefixerをインストールしてください。

```
# npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# yarn 
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```

インストールができたらTailWindCSSを設定するための設定ファイルを作成します。

```
#npm
npx tailwindcss init -p
#yarn 
yarn tailwindcss init -p
```
Tailwind.config.jsとposscss.config.jsが作成されます。

```
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```
```
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

Tailwind CSS では、tailwind.config.js 内にある purge オプションを設定することで、ビルド生成時の未使用のスタイルを除外し、パフォーマンスの最適化を行うことができるので設定していきます。
公式は./pagesや./componentsを対象としていますが、今回はsrcディレクトリ内を対象とします

:::note warn
purgeしたファイルが正しくない設定されていないと本番環境でCSSが反映されません。
:::

```
tailwind.config.js
module.exports = {
   //追記
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

JET modeを適用させる

概要にも書いたJet modeを適用させます。

```
// tailwind.config.js
module.exports = {
  // 追記
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```
CSSにTailwindを適用させる

ここまで終了したら、tailwindを適用させましょう。
CSSにtailwindCSSを適用させるためには2つの方法があるみたいです。

 1. TailwindCSSを直接ts(js）にimportする
 1. CSS内にTailwindを含める

TailwindCSSを直接ts(js）にimportする
```
  // pages/_app.ts(js)
 import '../styles/globals.css'
 import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp
```

こちらの方法は、module.cssなどで生のCSSの利用をしない場合に有効みたいです。

CSS内にTailwindを含める
./styles/globals.cssを開き、以下のように書き換えます。

```
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
これにより、ビルド時に構成されたシステムに基づき、すべてのスタイルをTailwindに変更するみたいです。

最後にpages/_app.ts(js)にCSSファイルをインポートして下さい。

```
// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
```

後はブラウザで確認し、TailwindCSSが適用されていることを確認するだけです！！