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

Posted 2023-03-07

【中文标题】构建和导出 TailwindCSS 和 NextJS 时遇到问题

【英文标题】：Trouble building and exporting 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 找到解决方案了吗？

【参考方案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 不会干扰它。