🚀

Next.js(TypeScript) & TailwindCSS の環境構築やってみた。

2022/08/28に公開約2,200字

Next.jsの環境構築



今回、Next.js と TailwindCSS の環境構築をする機会があったので、自分用のメモとして、記録しておきます。
何かアドバイスがありましたら、教えていただけると嬉しく存じます。

環境

構築時点の各種バージョンです。

  • Node: 16.17
  • Next.js: 12.2.5
  • Tailwind CSS: 3.1.8
  • TypeScript: 4.6

Next.js プロジェクト作成

  1. Next.js & TypeScript のプロジェクトを作成。
  2. [src]フォルダを作成して、[pages]と[styles]フォルダを格納する。
  3. eslint & prettier をインストール
// プロジェクト名は「app」にします。※名前は任意

yarn create next-app app --typescript

cd app

mkdir src
mv pages src
mv styles src

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier

.eslintrc.json を修正

先ほどインストールしたTypeScriptに対応するプラグインとprettierをeslintに読み込ませるために、以下に書き換えます。

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {}
}

.prettierrc ファイルを作成

その後、.prettierrc ファイルを作成し、設定します。

{
  "printWidth": 120,
  "semi": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false
}

以上でNext.jsの基本的な環境構築は終わりです。

TailwindCSSの設定

TailwindCSSの公式ドキュメントはこちら


パッケージをインストールします。

npm install -D tailwindcss postcss autoprefixer

// 設定ファイルを作成
npx tailwindcss init -p

自動的に作成された [tailwind.config.js] に追記します。

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

次に、src/styles/grobals.css に上書きします。

// src/styles/grobals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Unknown at rule @tailwind css(unknownAtRules) という警告が出た場合


  • VScode に [PostCSS Language Support] という拡張機能をインストールすると消えます。

なお、[Tailwind CSS IntelliSense] という拡張機能を入れるとVScodeでの開発が捗ります。

ここまでが、Next.js & TailwindCSS の環境構築が完了です。

おわりに

今回は、Next.js(TypeScript)とTailwindCSSを一緒にセットアップをしてみました。

これまではstyled-componentsを利用していましたが、TailwindCSSを使ったことがなく、初挑戦です。

好き嫌いが分かれやすいという情報が散見されますが、これから勉強をしていきたいと思います。

Discussion

ログインするとコメントできます