顺风CSS在构建后不应用样式

Question

我已经用Tailwindcss创建了Next Js应用程序，在开发环境中一切都很好，但是当我使用npm run build命令时，我的顺风CSS不工作，它在代码中，但CSS不应用

下面是我的代码:

_app.js

import "tailwindcss/tailwind.css";
const MyApp = ({ Component, pageProps }) => {
return (
<>
<Component {...pageProps} />
</>
);
};
export default MyApp;

globals.css

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

顺风config.js

module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
primary: "#000000",
Secondary: "#FFFFFF",
},
zIndex: {
auto: "auto",
negative: "-1",
Secondary: "#FFFFFF",
},
},
},
variants: {
extend: {},
},
plugins: [],
};

Answer 1

您需要安装postcss和autoprefixer。安装后，在根目录下创建postcss.config.js文件。

postcss.config.js

module.exports = {
plugins: {
autoprefixer: {},
tailwindcss: {},
},
};