Next.js(TypeScript) & TailwindCSS の環境構築やってみた。

Next.jsの環境構築

今回、Next.js と TailwindCSS の環境構築をする機会があったので、自分用のメモとして、記録しておきます。
何かアドバイスがありましたら、教えていただけると嬉しく存じます。

環境

構築時点の各種バージョンです。

• Node: 16.17
• Next.js: 12.2.5
• Tailwind CSS: 3.1.8
• TypeScript: 4.6
  
  

Next.js プロジェクト作成

1. Next.js & TypeScript のプロジェクトを作成。
2. [src]フォルダを作成して、[pages]と[styles]フォルダを格納する。
3. eslint & prettier をインストール

// プロジェクト名は「app」にします。※名前は任意

yarn create next-app app --typescript

cd app

mkdir src
mv pages src
mv styles src

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier

.eslintrc.json を修正

先ほどインストールしたTypeScriptに対応するプラグインとprettierをeslintに読み込ませるために、以下に書き換えます。

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {}
}

.prettierrc ファイルを作成

その後、.prettierrc ファイルを作成し、設定します。

{
  "printWidth": 120,
  "semi": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false
}

以上でNext.jsの基本的な環境構築は終わりです。

TailwindCSSの設定

TailwindCSSの公式ドキュメントはこちら


パッケージをインストールします。

npm install -D tailwindcss postcss autoprefixer

// 設定ファイルを作成
npx tailwindcss init -p

自動的に作成された [tailwind.config.js] に追記します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // --- content 追加 ---
  content: ["./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}"],
  // -------------------
  theme: {
    extend: {},
  },
  plugins: [],
};

次に、src/styles/grobals.css に上書きします。

// src/styles/grobals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

---

Unknown at rule @tailwind css(unknownAtRules) という警告が出た場合

---

• VScode に [PostCSS Language Support] という拡張機能をインストールすると消えます。

なお、[Tailwind CSS IntelliSense] という拡張機能を入れるとVScodeでの開発が捗ります。

ここまでが、Next.js & TailwindCSS の環境構築が完了です。

おわりに

今回は、Next.js（TypeScript）とTailwindCSSを一緒にセットアップをしてみました。

これまではstyled-componentsを利用していましたが、TailwindCSSを使ったことがなく、初挑戦です。

好き嫌いが分かれやすいという情報が散見されますが、これから勉強をしていきたいと思います。