构建和导出 TailwindCSS 和 NextJS 时遇到问题答案

【问题标题】：Trouble building and exporting TailwindCSS & NextJS构建和导出 TailwindCSS 和 NextJS 时遇到问题
【发布时间】：2021-10-06 10:15:50
【问题描述】：

我在构建和导出我的 TailwindCSS 和 NextJS 项目时遇到了困难。使用npm run dev 时，项目运行良好，我可以使用所有 Tailwind 类。当我运行npm run build && npm run export 时，所有 Tailwind CSS 样式都消失了，并且生成的 index.html 文件没有任何 CSS 样式。

包.json：

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.2",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.7"
  }
}

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: {
      zIndex: {
         '-10': '-10',
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

App.js

import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

我觉得npm run build && npm run export 没有调用任何 Tailwind 构建命令。我在他们的文档中找不到任何关于如何使用 NextJS 实际构建 TailwindCSS 项目的说明。

【问题讨论】：

@user16564677 找到解决方案了吗？

标签： javascript reactjs npm next.js tailwind-css

【解决方案1】：

我很肯定你的问题出在 package.json 中

...
"build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
...

当您运行构建时，您会遇到上述情况。

但是你需要这个：

"build": "next build",

这是我正在工作的 next.js 项目之一的示例

...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
...

【讨论】：

OP 在他的package.json 中有"build": "next build"，build:style 不会干扰它。