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

2021.05.01に公開

CSS

概要:

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

環境

tailwindcss: 2.1.2
next.js : 10.1.3
node 14

参考のコード

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

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起動のようでした

カスタム部品の読込

前の@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サイト公開

参考のページ

....

概要:

環境