next.JS服务器中的Tailwind CSS无法呈现任何样式

如何解决next.JS服务器中的Tailwind CSS无法呈现任何样式

我有一个使用node.js，next.js，Webpack和Tailwind CSS的基本Web服务器。

但是，当我运行服务器时，没有应用任何Tailwind样式，因此页面呈现时没有任何样式。

预期

实际

/styles/tailwind.css

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

/package.json

{
  "name": "app","version": "1.0.0","main": "index.js","scripts": {
    "build:css": "postcss styles/tailwind.css -o styles/main.css","dev": "node server.js","build": "next build","start": "next start -p $PORT","heroku-postbuild": "npm run build","test": "echo \"Error: no test specified\" && exit 1"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "babel-cli": "^6.26.0","babel-eslint": "^8.2.2","classnames": "^2.2.6","compression": "^1.7.4","dotenv": "^7.0.0","dotenv-webpack": "^1.7.0","express": "^4.16.4","http-proxy-middleware": "^0.19.1","immutable": "^4.0.0-rc.12","isomorphic-unfetch": "^3.0.0","js-cookie": "^2.2.0","next": "^9.0.1","next-cookies": "^1.1.2","next-redux-wrapper": "^3.0.0-alpha.2","prop-types": "^15.7.2","ramda": "^0.26.1","react": "^16.8.4","react-cookie": "^3.1.2","react-dom": "^16.8.4","react-redux": "^6.0.1","react-router-redux": "^4.0.8","react-timeago": "^4.4.0","redux": "^4.0.1","redux-immutable": "^4.0.0","redux-immutable-state-invariant": "^2.1.0","redux-saga": "^1.0.2","redux-thunk": "^2.3.0","semantic-ui-react": "^0.86.0","style-loader": "^1.3.0","styled-components": "^4.2.0"
  },"devDependencies": {
    "autoprefixer": "^9.8.6","babel-plugin-styled-components": "^1.10.0","css-loader": "^4.3.0","postcss-cli": "^8.0.0","postcss-import": "^12.0.1","postcss-loader": "^4.0.3","postcss-preset-env": "^6.7.0","precss": "^4.0.0","tailwindcss": "^1.8.12","typescript": "^4.0.3","webpack": "^4.44.2","mini-css-extract-plugin": "^0.12.0"
  }
}

/postcss.config.js

module.exports = {
  plugins: [
    require('precss'),require('postcss-import'),require('tailwindcss'),require('autoprefixer'),require('postcss-preset-env'),]
}

/tailwind.config.js

module.exports = {
  future: {},purge: [],theme: {
    extend: {},},variants: {},plugins: [],}

/pages/_app.js

import '../styles/tailwind.css'
//....

/pages/sample.js

import React from "react";

import '../styles/tailwind.css'

export default function Sample() {
  return (
    <div className="p-4 bg-white rounded shadow">
      <h1 className="text-2xl font-bold">Next.js</h1>
      <p className="text-gray-500">
        with Tailwind CSS & postcss-preset-env. Now uses tailwind purge method for
        production builds.
      </p>
    </div>
  );
}

/next.config.js

const { parsed: localEnv } = require('dotenv').config();
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require('path');
const Dotenv = require('dotenv-webpack');

// next.config.js
module.exports = {
  target: 'serverless',serverRuntimeConfig: {
    // Will only be available on the server side
  },env: {
    //...
  },webpack(config) {
    config.plugins = config.plugins || [];

    const rule = {
      test: /\.css$/,exclude: /node_modules/,use: [MiniCssExtractPlugin.loader,'css-loader']
    }

    config.module.rules.push(rule)

    config.plugins = [
      ...config.plugins,// Read the .env file
      new Dotenv({
        path: path.join(__dirname,'.env'),systemvars: true,}),new MiniCssExtractPlugin()
    ];

    return config;
  },};