Next.js+Tailwindcssの環境構築

やりたいこと

Next.js+Tailwindcssの環境構築

開発環境

Windows 10Pro

方法（2022/3/13時点）

• Next.jsのプロジェクト作成
  以下コマンド実行

npx create-next-app --typescript

プロジェクト名を入力して作成する

• Tailwindcssのインストール
  以下コマンド実行

yarn add -D tailwindcss postcss autoprefixer

以下コマンド実行でtailwind.config.js と postcss.config.js を作成

npx tailwindcss init -p

• パスの設定を変更する
  tailwind.config.jsを以下に変更

tailwind.config.js

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

• globals.cssを変更する
  globals.cssを以下に変更

globals.css

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

• index.jsを変更して確認する
  index.jsを以下に変更

index.js

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

確認できた

注意事項

globals.cssの@tailwindがimportされない現象
windowsで環境構築を行ったが、Unknown at rule @tailwind となり、Tailwindcssの設定がうまくimportされなかった

解決策

VSCode拡張機能PostCSS Language Supportを入れる

参考記事