Next.js + Tailwind CSS + Prettier + ESLint を PhpStorm で

Prettier のプラグインは自力で入れたのかな？（忘れた

Tailwind CSS のプラグインも入れた

プラグインは PhpStorm にバンドルされており、デフォルトで有効になっています。

ESLint | PhpStorm

PhpStorm はESLintと統合されており、プラグインで拡張できるさまざまな lint ルールを提供します。PhpStorm は、入力時に ESLint によって報告された警告とエラーをエデ…

pleiades.io

この辺を見ながら

Install Tailwind CSS with Next.js – Tailwind CSS

Setting up Tailwind CSS in a Next.js v10+ project.

tailwindcss.com

npx create-next-app@latest

? What is your project named? › とか聞かれるんで

my-app

プロジェクト名称を入れて、エンター連打で

cd my-app

階層移動して

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

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

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

next export して使おうと思ってるんで
package.json の build のとこ

"build": "next build",

を

"build": "next build && next export",

next export して使おうと思ってるんで、今回はとりあえず
pages/index.tsx の

// import Image from 'next/image'

と消すかどうかして

<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

を

<img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

npm install -D prettier prettier-plugin-tailwindcss
npm install -D eslint-plugin-sort-keys-custom-order

Automatic Class Sorting with Prettier – Tailwind CSS

People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you…

tailwindcss.com

ここで一旦

npm run dev

pages/index.tsx の

 <h1 className={styles.title}>

を

<h1 className="text-3xl font-bold underline">

とかに変えると、http://localhost:3000/ とかチェックしてると、Tailwind CSS は機能してるのがわかる
上のページとかの button のbefore のクラス名をh1に入れても並び替えはされてない

ここでPhpStormの設定で

とかやっても並べ替えしてくれてなさそうなんで

GitHub – tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. – GitHub – tailwindlabs/prettier-plugin-tailwindcss: …

github.com

ここに書いてあるように
prettier.config.js 作って

// prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

一旦 ctlr + c で止めて
再度

npm run dev

したら、ちゃんとクラス名並び替えできてるっぽいという自分用のメモ