1. Next.jsでTailwindCSSの環境構築

Next.js で TailwindCSS を使用するために、まずtailwindcss、postcss、autoprefixerをインストールします。postcss-preset-envなど他の PostCSS プラグインを使用する場合は、公式ドキュメントのページが参考になります。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

postcss - CSS ツールを作成するためのフレームワーク。
autoprefixer - PostCSS 製のツール。ベンダープレフィックス（-moz-や-webkit-とか）を自動で付与してくれる。

インストールが完了したら、tailwind.config.jsとpostcss.config.jsというファイルを作成します。

touch tailwind.config.js

touch postcss.config.js

tailwind.config.jsには下記を記述します。

//tailwind.config.js
module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.jsには下記を記述します。

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

global.cssなどに下記を記述。

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

_app.jsでglobal.cssを読み込みをすれば、TailwindCSSが使えるようになります。

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

Tailwind CSS with Next.js
Next.js + Tailwind CSS Example

2. VSCodeでTailwind CSSを使いやすくする

もしVSCodeを使用している場合、「Tailwind CSS IntelliSense」という拡張機能でオートコンプリートなどしてくれるのでTailwindCSSが書きやすくなります。

Tailwind CSS IntelliSenseの設定

ワークスペースのsettings.jsonに下記を記述してから、再起動するとオートコンプリートなどしてくれるようになります。機能しない場合は、Tailwindをインストールしていてtailwind.config.jsを作成しているか要確認。

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "javascript" //使用する言語を設定(html、cssなど)
  },
  "tailwindCSS.emmetCompletions": true, //Emmetの補完を有効にする
  "css.validate": false,  //@applyなどTailwind固有の構文エラー回避
}

GitHub - Intelligent Tailwind CSS tooling for Visual Studio Code