使用Create React App+TypeScript时Tailwind CSS报px-3不存在错误求助

错误原因 #

你的Tailwind配置中content字段仅指定扫描js/jsx/ts/tsx类型文件，未包含CSS文件。

Tailwind的JIT（即时编译）模式会严格依据content配置的路径扫描所有用到的类名，只生成实际需要的样式。由于CSS文件不在扫描范围内，Tailwind无法识别你在Settings.screen.css的@apply里使用的px-3、flex等工具类，因此编译时提示类不存在。

解决方法 #

修改tailwind.config.js的content字段，添加.css后缀的文件匹配：

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,css}'], // 新增 .css 至扫描列表
  presets: [],
  darkMode: 'media', // or 'class'
  theme: {
    fontFamily: {
      sans: ['var(--font-satoshi)', ...defaultTheme.fontFamily.sans],
    },
  },
  plugins: [
    require('tailwind-scrollbar')({ nocompatible: true }),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')
  ],
};

修改完成后重启开发服务器，配置即可生效。

内容的提问来源于stack exchange，提问作者strangeQuirks