时间戳

首页 > 解决方案 > Tailwindcss 不适用于 NextJS 12。实验性功能

javascript - Tailwindcss 不适用于 NextJS 12。实验性功能

问题描述

当 NextJS 12 发布时，我教用顺风构建一个项目。

我的 package.json

 {
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.0.1",
    "react": "^18.0.0-alpha-9c8161ba8-20211028",
    "react-dom": "^18.0.0-alpha-9c8161ba8-20211028"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "7",
    "eslint-config-next": "12.0.1",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.19"
  }
}

next.config.js 文件

 module.exports = {
  swcMinify: true,
  reactStrictMode: true,
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
};

并且根据 nextjs 文档，我们必须更新我们的 _document.js 文件

    import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

我收到这个奇怪的错误 错误

我的 global.css 文件

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

但是，如果我删除了实验性功能，它只是文件

像这样

module.exports = {
  swcMinify: true,
  reactStrictMode: true,
 
};

奇怪，但是在我构建后它可以工作

标签： javascriptreactjsnext.jstailwind-csstailwind-in-js

解决方案

我完全按照官方页面上的说明进行操作。

  • 它在开发模式下不起作用（下一个开发）
  • 它确实有效，但是在 prod 模式下（下一个构建 && 下一个开始）

我添加swcMinify: true到我的 next.config.js，现在它可以在两种模式下工作。

所以我的下一个完整配置现在是

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  reactStrictMode: true,
};

module.exports = nextConfig;

推荐阅读