我正在启动一个具有现有emotion.js 样式的新Next.js 项目，现在我正在尝试通过此指令添加tailwind https://tailwindcss.com/docs/guides/nextjs
这是我的 postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
和 tailwind.config.js
module.exports = {
purge: [
'./pages/**/*.js',
'./components/**/*.js',
'./lib/**/*/js'
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: []
}
和 next.config.js
module.exports = {
images: {
domains: [
'user-images.githubusercontent.com'
]
},
typescript: {
ignoreBuildErrors: true
},
eslint: {
ignoreDuringBuilds: true
}
}
这是我在 /styles/global.css 中使用 Tailwind 的方法
@tailwind base;
@tailwind components;
@tailwind utilities;
并将该 css 包含在 /pages/_app.js 中
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
我运行时所有样式看起来都不错next dev，但是当我这样做时next build && next export，它会导出到 /out 文件夹，但是当我尝试运行 index.html 时，它没有顺风样式，但是我的 Emotion.js 样式仍然有效。
我试过在这里搜索所有关于这个的答案，但没有一个有效。
我怀疑这与与emotion.js的冲突有关，指令如下jsxImportSource
这是我如何使用emotion.js。它在开发过程中运行良好
/** @jsxImportSource @emotion/react */
import { useState, useEffect } from 'react';
import { css, jsx } from '@emotion/react'
function App() {
}