时间戳

首页 > 解决方案 > Tailwind CSS 在构建后未应用样式

next.js - Tailwind CSS 在构建后未应用样式

问题描述

我已经使用 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;

全局的.css

/* ./styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

顺风配置.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.jstailwind-css

解决方案

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

postcss.config.js

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

推荐阅读