Closed5
Next.jsで環境を構築してTailwind+DaisyUIを追加する
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
Next.js Typescript環境構築
npx create-next-app@latest --typescript
こちらの記事を参考にさせていただきました🙇🏻♂️
公式にもインストール方法載ってますので、参考に
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;
Daisy UIインストール
npm i daisyui
tailwind.config.jsのpluginsに追加
module.exports = {
//...
plugins: [require("daisyui")],
}
Nextの静的サイトジェネレートをNPMのスクリプトに追加
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next build && next export",
"start": "next start",
"lint": "next lint"
},
このスクラップは2022/08/23にクローズされました