Tailwind CSS 在构建后未应用样式答案

【问题标题】：Tailwind CSS not applying Styles after BuildTailwind CSS 在构建后未应用样式
【发布时间】：2021-12-06 14:32:23
【问题描述】：

我已经使用 Tailwindcss 创建了 Next Js 应用程序，在开发环境中一切正常，但是当我使用 npm run build 命令时，我的 tailwind 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;

tailwind 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: [],
};

【问题讨论】：

标签： next.js tailwind-css

【解决方案1】：

您需要安装postcss and autoprefixer。安装后，在您的根目录中创建一个postcss.config.js 文件。

postcss.config.js

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

【讨论】：