Next.js（TailwindCSS入り）プロジェクトを最速で立ち上げる手法

サクッと用意出来てコーディングに集中出来るように現時点での最速構築方法をまとめています。
各バージョンによってはインストール方法が変わる可能性がありますので要注意してください。

環境	バージョン
macOS	v12.3.1
Node.js	v14.18.1
yarn	v1.22.18
React	v18.1.0
Next.js	v12.1.6
TailwindCSS	v3.0.24

TailwindCSS公式ではnpmによるインストールを推奨していますが、あえてyarnで進めます。

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

# nextの自動セットアップ
yarn create next-app

# tailwindcssとその仲間の依存関係をインストール
yarn add tailwindcss postcss autoprefixer

# tailwindcssのinit
yarn tailwind init -p

# nextの自動セットアップ

yarn create next-app

# tailwindcssとその仲間の依存関係をインストール

yarn add tailwindcss postcss autoprefixer

# tailwindcssのinit

yarn tailwind init -p

Terminal

生成されたtailwind.config.jsにテンプレートパスの設定を追加

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

module.exports = {

content: [

"./pages/**/*.{js,ts,jsx,tsx}",

"./components/**/*.{js,ts,jsx,tsx}",

theme: {

extend: {},

plugins: [],

}

tailwind.config.js

CSSにTailwindのディレクティブを追加

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

@tailwind base;

@tailwind components;

@tailwind utilities;

globals.css

簡単ですね、以上です。

共有:

いいね: