为什么我收到语法错误：tailwind CSS 中的未知工作答案

【问题标题】：Why I am getting syntax error:unknown work in tailwind CSS为什么我收到语法错误：tailwind CSS 中的未知工作
【发布时间】：2021-09-21 15:31:09
【问题描述】：

如图所示，我收到以下错误。
我在 tailwind 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;
}

【问题讨论】：

你能分享一下你的项目目录结构的截图吗？
@iftikharyk 当然，我现在已经在问题中添加了。
您能否向我们展示您的完整tailwind.config.js（可能相关）？
请也分享您的 global.css 文件。这可能有任何问题。
更新了，以前也可以用这个配置。

标签： next.js tailwind-css jit

【解决方案1】：

tailwind CSS 的配置方式没有任何问题。
我不是 100% 确定，但是当我使用 JIT 语法删除 tailwind 类时，错误就消失了，它的值是动态更新的。例如

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

【讨论】：

【解决方案2】：

我遇到了同样的问题（即使动态类代码被注释掉了！）在 GitHub 上挖掘 JIT 问题后，我意识到这是因为 tailwind 在构建时（而不是运行时）解析文件中的类。

该类不起作用，但 margin-[50px] 之类的东西会起作用，因为 tailwind 知道在运行时之前要使用该代码构建哪个类。

PS 我不是专家，但这就是我理解问题并解决问题的方式。

【讨论】：