顺风CSS太大

Question

我遇到了一个问题，使用顺风css与Vue3。看看网络选项卡，它的大小是4.4MB。

The postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {}
  }
}

tailwind.config.js

module.exports = {
  content: [
    "./frontend/**/*.{js,jsx,ts,tsx,vue}",
    "./app/views/**/*.html.erb"
  ],
  prefix: 'tw-',
  ...

使用纱线添加cssnano。yarn.lock

cssnano-preset-default@^5.2.12:
cssnano@5.1.13

tailwindcss@^2.1.4:

在main.css中导入顺风，这本身是在vue入口点中导入的。

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

无论是在开发中还是在生产中，main.css的大小都会发生变化。

Answer 1

好吧，我解决了。我使用的“顺风”版本与当前文档中的“内容”设置不兼容。我仍然必须使用以下语法：

  purge: {
    enabled: true,
    content: [
      "./frontend/**/*.{js,jsx,ts,tsx,vue}",
      "./app/views/**/*.html.erb"
    ],
  },

还需要重新构建prod环境。

Answer 2

您也有模式JIT，它将生成您的样式on https://v2.tailwindcss.com/docs/just-in-time-mode。