【Next.js＋TypeScript】Tailwind CSSの環境構築Q&A

筆者がfwywd一次採用試験を受けたときに、
割とちょこちょこハマる部分が多かったのでQ&Aとしてまとめておく。

採用試験を受ける人に限らず、
全てのNext.js＋TypeScript＋Tailwind CSSの環境構築で苦しんでいる人の助けになれれば嬉しい。

こんな人を対象にしているよ

• Next.js + TypeScript + Tailwind CSSの環境構築で詰まっている人
• Visual Studio Codeを使っている人

バージョン情報

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
Windows 10
Visual Studio Code 1.58.2

ファイル構造

Q&A

種類別に紹介。

インストール編

Ｑ１．Tailwind CSSをNext.js + TypeScript下でどうインストールしたらいいかわからない

Ａ．この記事の説明通りにやってみよう。

Ｑ２．npm経由でインストールしようとしたけどエラーが出る

Ａ．Node.jsがインストールされているか確認してみる。
していない人はここからDL可。

インストールしたか不明な人は、
Visual Studio Codeでターミナルを開き以下のコマンドで確認できる。

ターミナル

node -v
npm -v

Ｑ3．yarn経由でインストールしようとしたけどエラーが出る

セキュリティ エラー: [Import-Module]、PSSecurityExceptionとか言われる。

Ａ．Windows10のスクリプト実行設定「ExecutionPolicy」の設定を確認してみよう。
デフォルト値がRestricted（全てのスクリプトファイルの実行を禁止する）なため、
RemoteSigned（スクリプトファイルの実行を許可する）へ変更する必要がある。

Windows Powershell を**管理者として実行（ココ大事。しないとエラー吐く）**し、以下のコマンドを実行する。

powershell

Get-ExecutionPolicy /*現在の値確認。Restrictedになってたらこれが原因*/
Set-ExecutionPolicy RemoteSigned /*RemoteSignedへ変更*/

実行した後は、
念の為Visual Studio Codeを再起動してから確認してみてね。

tailwind.config.js編

Ｑ４．tailwind.config.jsなんてファイル見当たらないよ？

Ａ．Tailwind CSS をインストールしただけではtailwind.config.jsが作成されない。
以下のコマンドのどちらかをターミナルで実行するべし。

ターミナル

/*npm*/
npx tailwindcss init -p

/*yarn*/
yarn tailwindcss init -p

Ｑ５．Tailwind CSSが反映されない

インストールして使ってみたのに反映されていない。

Ａ．tailwind.config.jsにある項目「purge」の指定先が正しいか確認してみる。
相対パス表記が合っているか確認しよう。
特にディレクトリ構造を整理した人に起きがち。私のことです。

例えば「test」ってプロジェクトがあるとする。

上記のファイル構成で「pages」「components」フォルダにTailwind CSSを効かせたいとしたら、
tailwind.config.jsのpurge指定は以下の通り。

tailwind.config.js

module.exports = {
  purge: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}, 
  }
};

Ｑ６．追加した色が反映されない

Ａ．tailwind.config.jsファイル内で正しく記述されているか確認してみる。

tailwind.config.js

module.exports = {
  purge: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'primary': '#384359',
        'secondary': '#008c8d',
      }
    }
  }
};

よくやりがちなのが「extend:{}」の外に書いてたり表記を忘れてたりするパターン。
筆者は初使用でもない癖にextend:{}を書き忘れて10分ぐらいハマった。

Ｑ７．背景画像を指定しているのに404になる（表示されない）

Ａ．urlパスが間違っている。

Next.jsではpublicフォルダに画像を収納しておく。
パス指定時に’/’を入れるだけでアクセスできる。超便利。

例えば以下のファイル構造で「top.png」を背景画像にしたかったら、

“url()”の部分の記述はこれだけでOK。

tailwind.config.js

module.exports = {
  purge: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'primary': '#384359',
        'secondary': '#008c8d',
      },
      backgroundImage: (theme) => ({
        'bg-top': "url('/top.png')",
      }),
    }
  }
};

これもextend:{}内に書く必要があるため注意。

番外編:eslint-plugin-tailwindcss

Ｑ8．eslint-plugin-tailwindcssをインストールしたけどtailwind.config.jsファイルで追加したカスタマイズクラスをeslintが認識してくれない

「そんなクラスありませんよ！(no-custom-classname)」って警告してくる。
でもプロジェクトにはちゃんと反映されているパターン。
放置すると不必要な警告だらけになって非常に鬱陶しい。

Ａ．eslintrcファイルの設定でconfigの指定先が正しいか確認する。
デフォルト値は

"config": "tailwind.config.js"。

筆者の環境では、

上記のファイル構造で下記のとおりに修正したら直った。

.eslintrc

{
  "settings": {
    "tailwindcss": {
      "config": "./tailwind.config.js"
    }
}

同階層にあるからデフォルト値でも動く気がするんだけどなあ。なぜ動かなかったのか不明。

.eslinttcファイル全体の設定はこちら。prettierも併用している。

.eslintrc

{
  "extends": ["next", "next/core-web-vitals", "plugin:tailwindcss/recommended", "prettier"],
  "ignorePatterns": ["*.config.js"],
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  },
  "plugins": ["tailwindcss"],
  "settings": {
    "tailwindcss": {
      "config": "./tailwind.config.js",
      "groupByResponsive": true
    },
    "import/resolver": {
      "typescript": { "project": "./" }
    }
  }
}

皆の「詰まったポイント」募集中

「ここで躓いた」「今も悩んでる」ってところ、あればぜひ教えてね。載せます。

他の記事もぜひ読んでみてね。
【Next.js＋TypeScript】fwywdの一次採用試験攻略ガイド～試験の流れ編【採用試験対策】
【Git Flow】チーム開発のお作法～GitHubとブランチ管理編【採用試験対策】
【Next.js + TailwindCSS】TypeScriptを使ってコンポーネントを作ってみよう【fwywd一次採用試験】