tailwindcss + next.jsで カスタムcomponent読込と、SSGサイトdeploy

概要:

tailwindcssで、next.js初期設定、@apply カスタムclass読込
netlify deploy　などの内容となります。

---

環境

• tailwindcss: 2.1.2
• next.js : 10.1.3
• node 14

---

参考のコード

• ひな型的なプロジェクトを、追加しました

https://github.com/kuc-arc-f/tailwind_next

• git clone して
• npm install 後、yarn dev で、tailwindcss +next.js 環境が起動します
  (tailwindcss: 2.1.2 の場合です。)

---

• styles/globals.css

globals.css

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

• _app.js

pages/_app.js

_app.js

import '../styles/globals.css'
import '../styles/components/buttons.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

• tailwind.config.js

purgeの部分を変更します ,jsx. jsファイルが対象

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• top画面

pages/index.jsx

---

設定の手順

• 最新版で、tailwindcssを追加したい場合、下記の関連の手順で良いかと思います

• 手順としては、next.js, tailwindcss追加、_app.js, tailwind.config.js
  の設定等で、next.js起動のようでした

---

関連

https://tailwindcss.com/docs/guides/nextjs

---

カスタム部品の読込

• 前の@applyで、クラス定義を一括する場合を参考に、cssファイルを追加し。
  _app.js　で、読込を追加します

styles/components/buttons.css

buttons.css

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.btn-green {
  @apply bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded;
}
.btn-red {
  @apply bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
}

• _app.js は、下記のimport で読込み

_app.js

import '../styles/components/buttons.css'

• 画面の ボタン呼出し, index.jsx

index.jsx

<div className="my-2">
  <button className="btn-blue m-1">button</button>
  <button className="btn-green m-1">button</button>
  <button className="btn-red" m-1>button</button>
</div>

参考のデモページ

https://cms-kuc-jamstack-ex10.netlify.app

---

deploy

package.json　/ deploy を追加し、yarn deploy
または

npm run build && npm run export

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "deploy": "npm run build && npm run export"    
  },

• 出力ファイルを、netlify等のホスティングにdeployし、SSGサイト公開

---

参考のページ

https://zenn.dev/knaka0209/articles/5eb58a8a0de257

....