Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法

はじめに

バージョン情報

• node：15.11.0
• react: 17.0.2
• react-dom: 17.0.2
• next: 11.0.1
• autoprefixer: 10.2.6
• postcss: 8.3.5
• tailwindcss: 2.2.4

Tailwind CSS とは？

Tailwind CSS 導入の全体像

• Next.js (JavaScript)
  • ① Next.js (JavaScript) + Tailwind CSS の新規プロジェクトを作成
• Next.js (TypeScript)
  • ① Next.js (TypeScript) の新規プロジェクトを作成
  • ② Tailwind CSS の導入
  • ③ 設定ファイルの作成

Next.js (JavaScript) に Tailwind CSS を導入する方法

1. Next.js (JavaScript) + Tailwind CSS の新規プロジェクトを作成

# npm の場合
npx create-next-app next-tailwind -e with-tailwindcss

# yarn の場合
yarn create next-app next-tailwind -e with-tailwindcss

├── .gitignore
├── README.md
├── node_modules
├── package.json
├── pages
├── postcss.config.js
├── public
├── tailwind.config.js
└── yarn.lock

// pages/index.js
...
<h1 className="text-6xl font-bold">
  Welcome to{' '}
  <a className="text-blue-600" href="https://nextjs.org">
    Next.js!
  </a>
</h1>
...

# npm の場合
npm run dev

# yarn の場合
yarn dev

Next.js (TypeScript) に Tailwind CSS を導入する方法

1. Next.js (TypeScript) の新規プロジェクトを作成

# npm の場合
npx create-next-app next-ts-tailwind --typescript

# yarn の場合
yarn create next-app next-ts-tailwind --typescript

├── .eslintrc
├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
└── yarn.lock

2. Tailwind CSS の導入

• tailwindcss
• postcss
• autoprefixer

# npm の場合
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# yarn の場合
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 設定ファイルの作成

# npm の場合
npx tailwindcss init -p

# yarn の場合
yarn tailwindcss init -p

# 実行結果
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
✨  Done in 0.86s.

• tailwind.config.js
• postcss.config.js

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

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

// 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: [],
};

• ビルド時間が非常に速い
• 開発時のブラウザパフォーマンスが良くなる
• カスタマイズが容易になる

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

// pages/_app.tsx
// Tailwind CSS 以外のスタイルファイルはグローバルで適用したくないため削除
// import '../styles/globals.css'
// 追記
import 'tailwindcss/tailwind.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
export default MyApp;

Tailwind CSS の補完が効く VS Code の拡張機能

eslint-plugin-tailwindcss を導入すると、更に便利！

# npm の場合
npm install -D eslint-plugin-tailwindcss

# yarn の場合
yarn add -D eslint-plugin-tailwindcss

// .eslintrc
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:import/warnings",
    // 追記
    "plugin:tailwindcss/recommended"
  ],
  // 追記
  // tailwind.config.js などの config ファイル、ESLint の対象外にする
  "ignorePatterns": ["*.config.js"],
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

最後に

参考文献

• Install Tailwind CSS with Next.js - Tailwind CSS