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

2 min read読了の目安(約2300字

概要:

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

....