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

最近TailwindCSSというCSSフレームワークがあることを知り、
良い開発体験ができるということなので使用してみました。
#TailWindCSSとは

• UtilityFirstというアプローチでスタイルを組むことができるCSSフレームワーク。

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

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

#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ディレクトリ内を対象とします

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する
2. 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が適用されていることを確認するだけです！！