Next.js 環境構築 with typescript , tailwind css

・プロジェクト作成

npx create-next-app プロジェクト名

・TypeScriptの導入

TypeScriptを使用するにあたって、reactとnodeの型をInstallしましょう。

yarn add --dev typescript @types/react @types/node

インストールが終わったら、TypeScriptのconfigファイルを作成して、設定していきましょう。

cd プロジェクト名
touch tsconfig.json
yarn dev

tsconfig.jsonの中身を確認してみましょう。
※各項目の設定内容については、qiita,Zennの方に色んな方々が、分かりやすく説明して下さっている記事があるので、割愛します。

・Tailwind Cssの導入
※Next.jsのバージョンによって、インストールコマンドが異なるので、package.jsonのnextを確認して下さい。
筆者のバージョンは、10.2.3

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

次に、configファイルを作成していきます。

npx tailwindcss init -p

ルートディレクトリに、tailwind.config.js,postcss.config.jsが作成されていることを確認してみましょう。
初回生成時には、不使用なクラスを多く含んでいるため、不要なものを除外（purge)するために設定していきます。

// tailwind.config.js
purge: ['./pages//*.{js,ts,jsx,tsx}', './components//*.{js,ts,jsx,tsx}'],

次にTailwindをプロジェクトに適用する方法が２つあって

• 1._app.tsに直接インポートする方法
• 2.globals.cssにTailwindを含める方法

今回は、②で実施していきます。これについては、私の浅い知識では、どちらがベストか分からなかったため、割愛します。
ルートディレクトリから/styles/global.cssを作成

mkdir styles
cd styles
touch global.css

作成した、global.cssに記載しましょう。

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

// pages/_app.js
import '../styles/globals.css'

これにて、環境構築は完了です。
vsCodeを使用している方は、拡張機能を利用すると効率が爆上がりするので、是非使用してみて下さい。
Intelligent Tailwind CSS tooling for VS Code