Next.js でPHPファイルにも同じCSSを適用する方法
あまり無いだろうけど、Next.js案件で一部PHPのページも混ざる時など。
PHPファイルはpublicにある想定。Tailwind.css使用
global.cssに記述した内容はjsで記述したスタイル（例 bg-red-500）が上書きされないのでtailwind.config.jsに書く。または!を前につける。←buildするまで効かない
tailwind.config.js
perge CSSがphpにも効くようにcontentに’./public/admin/**/*.php’,を追加
themeとpluginsにフォントファミリー設定
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./public/admin/**/*.{php,js}', //←phpファイルも監視対象に jsファイル内でtailwindを書くこともあるのでjsも
],
theme: {
extend: {
fontFamily: {
noto: ['Dela Gothic One', 'sans-serif'], //←追加
},
colors: {
accent: '#33A7B5',
lightAccent: '#D8EEF1',
text: '#333',
},
},
},
plugins: [
function ({ addBase, addComponents, theme }) {
addBase({
body: {
color: theme('colors.text'),
fontFamily: theme('fontFamily.noto'), //←追加
},
})PHP側でスタイルシートを読み込む
PHPファイル
php側ではCDNに加えてphp用に書き出したstyle.cssも記述しておく
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>＊＊＊＊</title>
<link href="./assets/css/style.css" rel="stylesheet">//←追加
</head>Package.jsonでPHP用のstyleを生成
"scripts": {
"dev": "next dev",
"build": "npx tailwindcss -i ./src/app/globals.css -o ./public/admin/assets/css/style.css --minify && next build", //追加
"start": "next start",
"lint": "next lint"
},