Tailwind CSS 在构建后未应用样式

Posted 2023-03-07

【中文标题】Tailwind CSS 在构建后未应用样式

【英文标题】：Tailwind CSS not applying Styles after Build

【发布时间】：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: [],
;

【参考方案1】：

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

postcss.config.js

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