💭
tailwindcss + next.jsで カスタムcomponent読込と、SSGサイトdeploy
概要:
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サイト公開
参考のページ
....
Discussion