css - React Build Tailwind Not Including all classes

Question

So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1...

That's my tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Answer 1

您应该检查一些事项：

1. 确保将顺风类放在 className 属性而不是 class 属性中

2. 不要使用字符串连接来创建类名。所以，不要写<div class="text-{{ error ? 'red' : 'green' }}-600"></div>，写<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

3. 确保所有文件都包含在 purge 命令中。由于您只指定'./src/**/*.{js,jsx,ts,tsx}'，这意味着 tailwind 将仅扫描不应在具有这些扩展名的文件上清除哪些类。这意味着如果您在 html 文件中使用 tailwind 类，tailwind 将不会扫描这些文件。如果您以某种方式在 ./src 之外有文件，也是同样的情况。