Блог

Главная - Вопросы по программированию - Почему я получаю синтаксическую ошибку:неизвестная работа в CSS попутного ветра

Почему я получаю синтаксическую ошибку:неизвестная работа в CSS попутного ветра

#next.js #tailwind-css #jit

Вопрос:

Я получаю следующую ошибку, как показано на рисунке.
Я включил режим jit в CSS tailwind, и раньше он работал нормально.

Это ошибка, которую я недавно получил, не внося никаких изменений в конфигурацию tailwind. Если я удалю первые 3 строки из ./styles/global.css этого @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;
}

Комментарии:

1. Можете ли вы поделиться скриншотом структуры каталогов вашего проекта?

2. @iftikharyk конечно, я добавил сейчас в вопрос.

3. Не могли бы вы, пожалуйста, показать нам ваше полное tailwind.config.js (это может быть связано)?

4. Пожалуйста, поделитесь также своим глобальным css-файлом. С этим могут возникнуть какие-то проблемы.

5. Обновил его , он раньше работал с этой конфигурацией.

Ответ №1:

В том, как был настроен CSS попутного ветра, не было ничего плохого.
Я не уверен на 100%, но ошибка исчезла, когда я удалил класс tailwind, используя синтаксис JIT, значение которого динамически обновлялось. например

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

Ответ №2:

У меня была та же проблема (даже с закомментированным кодом динамического класса!) Покопавшись в проблемах JIT на GitHub, я понял, что это связано с тем, что tailwind анализирует файл для классов во время сборки (а не во время выполнения).

Этот класс не будет работать, но что-то в этом роде margin-[50px] будет работать, потому что tailwind знает, какой класс создавать с помощью этого кода до выполнения.

PS Я не эксперт, но именно так я понял проблему и исправил ее.

Метки: