对于像SASS这样的顺风预处理器，@tailwind将不起作用。您必须使用@import "tailwindcss/"。例如@import "tailwindcss/base"。
现在跳转到webpack配置：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = MiniCssExtractPlugin.loader;

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      // template: "index.html",
      template: path.resolve(__dirname, 'public/index.html')
    }),

    new MiniCssExtractPlugin(),
    new VueLoaderPlugin(),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          stylesHandler,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

如果你不使用VueJ，你可以忽略vue规则。下面是我使用的devDependencies：

"@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "@webpack-cli/generators": "^2.4.2",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.23",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "workbox-webpack-plugin": "^6.5.1"

不要忘记像这样配置postCSS：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('./tailwind.config.js'),
    require('autoprefixer')
  ],
};

现在将scss文件导入到main.js或index.js。对于分离CSS，您可以遵循这篇文章：https://survivejs.com/webpack/styling/separating-css/
好好享受