为什么我得到语法错误:在顺风CSS中未知的工作

Question

如图所示，我得到了以下错误。

我在顺风CSS中启用了jit模式，它过去工作得很好。

这是我最近在没有改变顺风配置的情况下遇到的错误。如果删除./styles/global.css的前3行，即@tailwind base; @tailwind components; @tailwind utilities;

它起作用了

如果我在顺风配置中删除了mode:'jit'，它就能工作。以上两者都是我需要的东西，不能移除，有什么解决办法吗？

这里是供参考的tailwind.config.js文件。

   module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {
      backgroundImage: () => ({
        'sprite-background': "url('/images/icons.png')",
      }),
      boxShadow: {
        fb: '0 -2px 5px rgb(128,128,128)',
        fbpanel: '0 1px 10px grey',
        img: '2px 3px 12px #d3d3d3',
      },
      // compiled the css with the below primary and secondary colors and linked with _app.tsx.
      colors: {
        primary: '#C54582',
        secondary: '#F4DCF4',
        'app-background': '#fff',
        orange: '#ff5a42',
        workItem: '#f5f5dc',
        workItemActive: '#81816d',
        plannedIncome: 'rgba(97,255,42,.43)',
        plannedExpense: 'rgba(255,114,114,.49)',
      },
      fontFamily: {
        sans: [
          'Source Sans Pro',
          'sans-serif',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
        serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
        mono: [
          'ui-monospace',
          'SFMono-Regular',
          'Menlo',
          'Monaco',
          'Consolas',
          'Liberation Mono',
          'Courier New',
          'monospace',
        ],
      },
      flex: {
        2: '2',
      },
      gridTemplateColumns: {
        financeHeader: '24rem 1fr',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

​

​

​

​

// global.css

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


p{
    @apply ml-1 mt-8;
}

li{
    @apply mt-1;
}

h1{
    @apply text-4xl;
}

h2{
    @apply font-semibold ml-1 mt-8;
}

ul{
    @apply list-disc ml-1 mt-8;
}

Answer 1

如何配置顺风CSS没有什么问题。

我不是100%确定，但是当我使用JIT语法删除了值被动态更新的顺风类时，错误就消失了。例如

<div className=`margin-[${marvalToBeCalcEveryRender}]px` /> 

Answer 2

我也遇到了同样的问题(即使是动态类代码注释掉了！)在深入研究了GitHub上的JIT问题之后，我意识到这是因为顺风在构建时(而不是运行时)解析类的文件。

这个类不起作用，但是类似于margin-[50px]的东西会起作用，因为顺风知道在运行时之前用该代码构建什么类。

我不是专家，但这就是我理解问题和解决问题的方法。