我在构建和导出 TailwindCSS 和 NextJS 项目时遇到了困难。使用 npm run dev 时，该项目运行良好，我可以使用所有 Tailwind 类。当我运行 npm run build && npm run export 时，所有 Tailwind CSS 样式都消失了，并且生成的 index.html 文件没有任何 CSS 样式。
Package.json：
{
"name": "web","version": "0.1.0","private": true,"scripts": {
"build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css","dev": "next dev","build": "next build","start": "next start","export": "next export"
},"dependencies": {
"@headlessui/react": "^1.4.0","@heroicons/react": "^1.0.2","next": "11.0.1","react": "17.0.2","react-dom": "17.0.2"
},"devDependencies": {
"autoprefixer": "^10.3.1","eslint": "7.30.0","eslint-config-next": "11.0.1","postcss": "^8.3.6","tailwindcss": "^2.2.7"
}
}tailwind.config.js
module.exports = {
mode: 'jit',purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,tsx}'],darkMode: false,// or 'media' or 'class'
theme: {
extend: {
zIndex: {
'-10': '-10',}
}
},variants: {
extend: {},},plugins: [],}App.js
import 'tailwindcss/tailwind.css'
function MyApp({ Component,pageProps }) {
return <Component {...pageProps} />
}
export default MyApp我觉得 npm run build && npm run export 没有调用任何 Tailwind 构建命令。我在他们的文档中找不到关于如何使用 NextJS 实际构建 TailwindCSS 项目的任何说明。