我正在启动一个新的Next.js项目,该项目已经有了现有的emotion.js样式,现在我正在尝试通过这个指南https://tailwindcss.com/docs/guides/nextjs来添加tailwind。
当我运行
我已经尝试在这里搜索所有答案,但没有一个能解决问题。
我怀疑这与emotion.js的指令(如
以下是我如何使用emotion.js。尽管在开发过程中它运行良好。
以下是我的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文件时,它没有tailwind样式,然而我的emotion.js样式仍然有效。我已经尝试在这里搜索所有答案,但没有一个能解决问题。
我怀疑这与emotion.js的指令(如
jsxImportSource
)产生冲突有关。以下是我如何使用emotion.js。尽管在开发过程中它运行良好。
/** @jsxImportSource @emotion/react */
import { useState, useEffect } from 'react';
import { css, jsx } from '@emotion/react'
function App() {
}