webpack-5 tailwindcss设置不起作用

yxyvkwin  于 2022-12-30  发布在  Webpack
关注(0)|答案(1)|浏览(371)

这是tailwind.config.js

module.exports = {
 // webpack is building into dist
  content: ["./dist/*.html"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

这是postcss.config.js

const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: ["postcss-preset-env", tailwindcss],
};

这是webpack.config.js

module.exports = {
    mode: "development",
    target: "web",
    entry: ["regenerator-runtime/runtime", "./src/index.js"],
    output: {
      filename: "bundle.js",
      path: path.join(__dirname, "dist"),
      publicPath: "/",
    },
    resolve: {
      extensions: [".js", ".css"],
      alias: {
        components: path.resolve(__dirname, "src/components"),
      },
    },
    devtool: "eval",
    module: {
      rules: [
        { test: /\.(js|jsx)/, loader: "babel-loader", exclude: /node_modules/ },
        { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
        {
          test: /\.(woff(2)?|ttf|eot|jpg|jpeg|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[contenthash].[ext]",
                outputPath: "fonts/",
              },  }, ],    },       
      ],
    },
    devServer: {
      static: {
        directory: path.resolve(__dirname, "dist"),
      },
      historyApiFallback: true,
    },
    plugins: [ ],
  };

这是index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
// for testing to see if this page is loading. color is set correctly
body {
  color: green;
}

顺风仍然没有加载

vdzxcuhz

vdzxcuhz1#

问题出在tailwind.config.js上,应该是这样的

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

相关问题