Closed5

Next.jsで環境を構築してTailwind+DaisyUIを追加する

KazukiNotoKazukiNoto

Dockerfile

FROM node:16.17.0-slim
# NPM update
RUN npm install -g npm

# aptパッケージアップデート
RUN apt-get update
# gitのインストール
RUN apt-get install git -y
KazukiNotoKazukiNoto

こちらの記事を参考にさせていただきました🙇🏻‍♂️
公式にもインストール方法載ってますので、参考に

Tailwindをインストールする

ディレクトリを先程作成したプロジェクトのディレクトリに移動する

cd [project-name]

Tailwindインストール

npm install -D tailwindcss postcss autoprefixer

Tailwind初期設定

npx tailwindcss init -p

tailwind.config.jsにTailwindを適用するディレクトリ等を追加する

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

Tailwindの命令をグローバルCSSへ追加

./styles/global.cssの内容を全て削除し、以下の内容で書き換える

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

Daisy UIインストール

npm i daisyui

tailwind.config.jsのpluginsに追加

module.exports = {
  //...
  plugins: [require("daisyui")],
}
KazukiNotoKazukiNoto

Nextの静的サイトジェネレートをNPMのスクリプトに追加

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
このスクラップは2022/08/23にクローズされました