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

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

https://fwywd.com/news/recruitment-1st

採用試験を受ける人に限らず、
全ての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

# ファイル構造

![ファイル構造全体.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1845828/db4c95d7-aa73-4450-9ef4-76c18d544289.jpeg)

# Q&A
種類別に紹介。
## インストール編
### Ｑ１．Tailwind CSSをNext.js + TypeScript下でどうインストールしたらいいかわからない
Ａ．この記事の説明通りにやってみよう。

https://fwywd.com/tech/next-tailwind

### Ｑ２．npm経由でインストールしようとしたけどエラーが出る
Ａ．Node.jsがインストールされているか確認してみる。
していない人は[ここ](https://nodejs.org/ja/)からDL可。

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

```ruby:ターミナル
node -v
npm -v
```

### Ｑ3．yarn経由でインストールしようとしたけどエラーが出る
セキュリティ エラー: [Import-Module]、PSSecurityExceptionとか言われる。

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

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

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


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

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

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

```ruby:ターミナル
/*npm*/
npx tailwindcss init -p

/*yarn*/
yarn tailwindcss init -p
```

### Ｑ５．Tailwind CSSが反映されない
インストールして使ってみたのに反映されていない。

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

例えば「test」ってプロジェクトがあるとする。
![ファイル構造.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1845828/b7ea2770-02e8-e9c5-8cbe-257d9b3559e8.jpeg)

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

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

### Ｑ６．追加した色が反映されない
Ａ．tailwind.config.jsファイル内で正しく記述されているか確認してみる。

```ruby: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」を背景画像にしたかったら、
![ファイル構造 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1845828/c0628e8a-b239-337f-c6f6-b6e060ed685d.jpeg)
“url()”の部分の記述はこれだけでOK。

```ruby: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が認識してくれない

https://www.npmjs.com/package/eslint-plugin-tailwindcss

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

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

筆者の環境では、
![ファイル構造 (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1845828/0a5cad59-3ff9-ba8a-2c26-385f876019d2.jpeg)
上記のファイル構造で下記のとおりに修正したら直った。

```ruby:.eslintrc
{
  "settings": {
    "tailwindcss": {
      "config": "./tailwind.config.js"
    }
}
```

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


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

```ruby:.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": "./" }
    }
  }
}
```

</div></details>

# 皆の「詰まったポイント」募集中
「ここで躓いた」「今も悩んでる」ってところ、あればぜひ教えてね。載せます。

他の記事もぜひ読んでみてね。
[【Next.js＋TypeScript】fwywdの一次採用試験攻略ガイド～試験の流れ編【採用試験対策】](https://qiita.com/emjo1804/items/62dabbc059a94778fd25)
[【Git Flow】チーム開発のお作法～GitHubとブランチ管理編【採用試験対策】](https://qiita.com/emjo1804/items/9daea4cd42980f179032)
[【Next.js + TailwindCSS】TypeScriptを使ってコンポーネントを作ってみよう【fwywd一次採用試験】](https://qiita.com/emjo1804/items/72c7c76581e60a0d611b)