Next.jsでのtailwindcssの導入の仕方

#流行りのスタイルのtailwindcssの導入の仕方(Next.js)

npx create-next-app next-jsで導入したファイルに

1.npm install

npx create-next-app . --use-npm

npm i tailwindcss

npx tailwindcss init -p

2.🗂stylesのglobal.cssの中身を書き換える

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

3.🗂pagesにimport文を追加

import '../styles/globals.css';
import 'tailwindcss/tailwind.css';

4.下記のサイトを参考にclassName内に記述

tailwindcssのチートシート

[例です]

<div classnName="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono"></div>