Next.js+TypeScript+tailwindcssの開発環境構築

標記の開発環境構築を試したので作業ログを残す。

確認環境

• MacBook Pro (16-inch 2019)
• macOS Monterey 12.0.1
• Node.js v14.17.1

手順

以下のコマンドを実行する。

# Next.js+TypeScriptの環境構築
npx create-next-app@latest --ts my-app

# tailwindcssの環境構築
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

次にtailwind.config.jsを以下のように書き換える

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

そして、./styles/globals.cssの一番上にこのコードを挿入。

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

これでいったん完了。
以下のコマンドによりブラウザで実行できる。

npm run dev

さらにCSSコードを除去し、tailwindcssのみの記述にする

この状態だとまだCSSで書かれたコードが残っているので、Next.js + Tailwind CSS Exampleを参考に、tailwindcssのみの記述にしていく。

./styles/globals.cssのコードを全部消し、以下のコードで置き換える。

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

./styles/Home.module.cssは削除する。

pages/index.tsxを以下のコードで置き換える。

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'

const Home: NextPage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      hello world!
    </div>
  )
}

export default Home

これで最低限のCSSファイルを除き、tailwindcssのみのコードになった。

以上

参考

• Next - TypeScript
• Install Tailwind CSS with Next.js
• Next.js + Tailwind CSS Example