Next.jsでTailwindCSSを使えるようにする。（公式がサポート開始？：RFC）

Next.jsにTailwindCSSが公式にサポート？ RFC(request for comment)

新規にNext.jsのアプリを作ってみていきます。

npx create-next-app tailwindnextjs
cd tailwindnextjs

git init
git branch -m main
git add .
git commit -m "init"

Next.jsのVersionは10以上
npm install tailwindcss postcss autoprefixer

設定ファイルの新規作成
tailwind.config.jsとpostcss.config.jsを新規作成します

npx tailwindcss init -p

tailwind.config.jsのドキュメント
Configuration - Tailwind CSS
https://tailwindcss.com/docs/configuration

他のPostCSSプラグインを一緒に使う場合は下記を読んでください。
Using with Preprocessors - Tailwind CSS
https://tailwindcss.com/docs/using-with-preprocessors

本番で使われていないスタイルを削除します。

Tailwindの設定

pagesやcomponentsフォルダ内のスタイルを削除するパスを設定します。
JavaScriptファイルの場合（TypeScriptならば指定の拡張子を書き換えます）

tailwind.config.js

  module.exports = {
-   purge: [],
+   purge: ['./pages/**/*.js', './components/**/*.js'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

最適化をする場合は下記をご覧ください。
Optimizing for Production - Tailwind CSS
https://tailwindcss.com/docs/optimizing-for-production

Next.jsのCSSにTailwindを組み込む

2つの方法があります。

1つ目

pages/_app.js

-   import '../styles/globals.css'
+   import "tailwindcss/tailwind.css";

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

globals.cssやHome.module.cssを使用しない場合は削除してください。
またこれらを参照しているimportも削除してください。

2つ目

./styles/global.css を開いてください。

/* ./styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

のように書き換えます。

Tailwindを更に拡張したい場合
Adding Base Styles - Tailwind CSS
https://tailwindcss.com/docs/adding-base-styles
Extracting Components - Tailwind CSS
https://tailwindcss.com/docs/extracting-components
Adding New Utilities - Tailwind CSS
https://tailwindcss.com/docs/adding-new-utilities
を読んでください。

最後に、CSSファイルがpages /_app.jsコンポーネントに
インポートされていることを確認します。

// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

globals.cssとは違う名前をつけた場合は、そのファイル名でimport文を書いてください。

動作確認

これで完了です。
npm run devを実行して、TailwindCSSがNext.jsプロジェクトで
使用できているか確認してください。

参考

Install Tailwind CSS with Next.js - Tailwind CSS
https://tailwindcss.com/docs/guides/nextjs

「New Next.js RFC: Tailwind Support! ◆ Fast DX ◆ Zero Config ◆ Backwards Compatible https://t.co/JA5qVMrsfb https://t.co/xgteMzosNr」 / Twitter
https://twitter.com/timneutkens/status/1336724371147264001

dotCSS 2019 - Sarah Dayan - In Defense of Utility-First CSS - YouTube
https://www.youtube.com/watch?v=R50q4NES6Iw