Next.js + Typescript + TailwindCSSのつまずかない環境構築

Next.jsのプロジェクトの作成

Next.jsのプロジェクトの作成

> npx create-next-app MyApp

Typescript

Typescriptのインスコ

> touch tsconfig.json 
> yarn dev

yarn devするとtsconfig.jsonあるのにts関連のパッケージないよ！って言われるので
言われた通りのパッケージをインスコ

_app.jsとindex.jsを_app.tsx,index.tsxに変える

_app.tsx

import "../styles/globals.css";
import { AppProps } from "next/app";

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

index.tsxは自動生成されるもの消して終わり

TailwindCSS

TailwindCSSのインスコ

> yarn add tailwindcss@latest postcss@latest autoprefixer@latest postcss-preset-env
> touch postcss.config.js
> npx tailwindcss init --full // fullにするとstyle全部ぶっ込んでくれる

設定ファイル書き換え

tsxファイルに適用させる設定を書く

tailwind.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const colors = require("tailwindcss/colors");

module.exports = {
  + purge: ["./pages/**/*.tsx", "./components/**/*.tsx", "./public/**/*.html"],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
      // 略

postcss.config.js

module.exports = {
    plugins: { tailwindcss: {}, "postcss-preset-env": {} },
  };

styleの適用

style/global.cssを書き換える

style/global.css

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

test用ボタン

これにstyleが適用されて表示できたら完了

<button id="sendMoneyButton" className="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Send</button>