Next.jsで`Tailwind CSS`を使用する方法

Next.js のプロジェクトを作成する

ディレクトリを作成し、ターミナルでnpx create-next-app app_nameを実行します。

ターミナル

$ npx create-next-app app_name

すると以下のようにファイルなどが作成されます。

`Tailwind CSS`の設定をする

`Tailwind CSS`をインストールする

まずTailwind CSSをインストールします。
ターミナルで以下のコマンドを実行します。

ターミナル

$ npm install -D tailwindcss postcss autoprefixer

設定ファイルを生成する

次にtailwind.config.jsとpostcss.config.jsを生成するためにnpx tailwindcss init -pを実行します。

ターミナル

$ npx tailwindcss init -p

tailwind.config.jsとpostcss.config.jsが生成されました。

`tailwind.config.js`を編集する

tailwind.config.js内容を変更します。
以下のように追記します。

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

global.cssを編集する

次に./styles/globals.cssを編集します。

./styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

以上で設定が完了しました。

`Tailwind CSS`を使用する

以下のチートシートを確認ながらindex.jsを以下のように編集します。

index.js

import Head from 'next/head'

const Home = () => {
  return (
    // チートシートを見ながらclassNameに記述する
    <div className="min-h-screen py-0 px-2 flex flex-col justify-center items-center">
      <Head>
        <title>Sample App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <h1 className="text-8xl text-purple-600">
          Hello sample-app!!
        </h1>
    </div>
  )
}

export default Home

Tailwind CSSが使用できていることが確認できました。