Как добавить правило @tailwind CSS в css checker

Question

Попутный ветер [1] добавляет @tailwind CSS в правиле, которое помечено как неизвестное. Как мне добавить это, чтобы остановить ошибку?

например styles.css

@tailwind preflight;

@tailwind utilities;

1: https://tailwindcss.com/docs/what-is-tailwind

Answer 1

Если вы используете VS Code, вы можете использовать следующий плагин: https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Answer 2

Visual Studio Code позволяет определять пользовательские данные для языковой службы CSS.

Например, в вашем рабочем пространстве .vscode/settings.json можете добавить:

{
  "css.customData": [".vscode/css_custom_data.json"]
}

А потом в .vscode/css_custom_data.json Добавить:

{
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind’s “Functions & Directives” documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
        }
      ]
    }
  ]
}

Обратите внимание, что вам придется перезагрузить окно VS Code, чтобы изменения вступили в силу.

Вот копия .vscode/css_custom_data.json, который содержит все директивы с короткими фрагментами использования (синтаксис которых, в свою очередь, выделяется в коде vs):

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

Вот предварительный просмотр результата:

Отсутствует единственная директива @apply, потому что он объявлен на уровне свойств CSS. Язык Service CSS, вероятно, не ожидалatRules на уровне собственности и не будет принимать такие директивы.

Answer 3

Это правило at-rule-no-unknown, предоставляемое встроенным списком vscode.

Чтобы от него избавиться, нужно сделать следующее:

1 Установить расширение stylelint code --install-extension shinnn.stylelint

2 Установите stylelint рекомендуемый конфиг npm install stylelint-config-recommended --save-dev

3 Добавьте эти две строки в свои пользовательские настройки vscode.

"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint

4 Вставьте эти строки в файл с именем .stylelintrc в корневом каталоге вашего проекта создайте его, если он не существует. Более подробную информацию о конфигурации stylelint можно получить по этой ссылке: https://stylelint.io/user-guide/

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind"
      ]
    }],
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Answer 4

Рекомендуемые настройки кода VS

Официальная документация Tailwind CSS IntelliSense VS

VS Code имеет встроенную проверку CSS, которая может отображать ошибки при использовании синтаксиса, специфичного для Tailwind, например @apply. Вы можете отключить это с помощью настройки css.validate:

      "css.validate": false

По умолчанию VS Code не запускает завершение при редактировании «строкового» содержимого, например, в значениях атрибутов JSX. Обновление параметра editor.quickSuggestions может улучшить ваш опыт:

      "editor.quickSuggestions": {
  "strings": true
}

Объединив оба, ваш файл settings.json (если он новый) будет выглядеть примерно так:

      {
    "css.validate": false,
    "editor.quickSuggestions": {
        "strings": true
      }
}

Источник: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Answer 5

1. Просто зайдите в настройки (ctrl +,) для ярлыка.
2. Найдите CSS в строке поиска.
3. Найдите (CSS> Lint: Unknown At Rules)
4. Выберите "Игнорировать" в раскрывающемся списке.
Это все

Answer 6

Я рекомендую установить поддержку языка postCSS, а затем переименовать tailwind.css в tailwind.pcss, затем изменить ссылки в ваших сценариях package.json (или любых других сборочных скриптах, которые вы используете для tailwind) на tailwind.pcss из tailwind.css, и все должно отлично работает

Правило @apply совместимо с postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

Answer 7

Я здесь новичок, но самый простой ответ для решения этой проблемы — выполнить следующие шаги:

1. Откройте файл CSS, в который вы импортируете CSS Tailwind.

2. Нажмите Ctrl + Shift + P и найдите «изменить языковой режим».

3. В строке поиска введите «tailwindcss» и выберите его.

4. Теперь ваш файл CSS связан с CSS Tailwind вместо обычного CSS, и предупреждения должны исчезнуть.

Кредит: https://www.codeconcisionly.com/posts/tailwind-css-unknown-at-rules/

Таким образом, вам не нужно устанавливать какие-либо третьи плагины или игнорировать ошибки. Спасибо за прочтение!

Answer 8

Согласно репозиторию github tailwindcss-intellisense:

Рекомендуемые настройки кода VS

Использоватьfiles.associationsнастройка, чтобы указать VS Code всегда открывать.cssфайлы в режиме Tailwind CSS:

      "files.associations": {
   "*.css": "tailwindcss"
}

Исправлено предупреждение @tailwind и добавлены директивы и функции попутного ветра для intellisense.

Дополнительную информацию о расширении tailwindcss intellisense можно найти в репозитории github.

Answer 9

Просто добавьте три строчки в settings.json файл

"css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,

Answer 10

SCSS

Если вы используете SASS с Tailwind, вы все равно увидите ошибки в вашем .scss файлы, использующие эти более ранние ответы на этот вопрос.

Чтобы правильно пометить SASS, вы можете добавить в настройки VS Code:

"scss.validate": false,

Следуйте инструкциям @hasusuf, но отключите средство проверки кода VS по умолчанию:

Добавьте эти 3 настройки:

"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,

Answer 11

Я отредактировал свой .vscode/settings.json файл, добавив в "css.validate": false, казалось, работал у меня без установки внешних библиотек.

https://github.com/Microsoft/vscode/issues/14999

Answer 12

После многих тестов: подсветка синтаксиса POSTCSS и STYLUS, удаляет предупреждения, но CSS Intellisence не является полным, не показывает классы first-utitilies Tailwind

Я установил плагин 'language-stylus', в VSCode

Настройки> Настройки пользователя:

"files.associations": {
   "* .css": "stylus"
 },

До скорого!

CSS Intellisence является неполным

Answer 13

Я знаю, что уже слишком поздно отвечать, но это работает для меня при работе с CSS и SCSS. В вашейsettings.json, добавьте/отредактируйте приведенный ниже код.

      "files.associations": {
    "*.css": "tailwindcss",
    "*.scss": "tailwindcss"
}

Answer 14

Добавьте расширение VSCode

добавить языковую поддержку

Answer 15

Ваши правила попутного ветра находятся в файлах scss (или других таблицах стилей)? Пожалуйста, следуйте документации Tailwind и поместите правила в файл..css(не scss или другие).

1. Правила правильно определены?

   • Нет возврата к документации Tailwind
   • Да

2. Вам нужно включить его в файл sccs или другой? сделайте следующее:

   • Вstyle.scss, удалите все правила CSS Tailwind и добавьте строку:

      @import "<path_to_my_tailwind_conf>";

• <my_tailwind_conf>.css:

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

Замените строку внутри угловой скобки <> именем вашего файла и путем к нему.

Answer 16

сегодня vscode настраивается, чтобы избавиться от этого предупреждения в вашем vscode, вы можете создать папку с именем «.vscode» и создать новый файл с именем «settings.json», а в файле settings.json вы можете вставить этот json

Answer 17

Обязательно установите поддержку языка PostCSS, расширение находится в файле VSCODE. Это устранит отображаемую ошибку.

Правило @apply совместимо с postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

Ссылка на торговую площадку VS: https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Примечание. Удалите PostCSS intellisense и расширение выделения из VS Code, иначе оно не будет работать.

Answer 18

Просто зайдите в настройки (ctrl +,) для ярлыка.

Откройте настройки, найдите «неизвестно», первым результатом должен быть тот, который вы ищете: CSS > Lint: Unknown At Rules:

Измените это, чтобы игнорировать:

Сделанный! ваше здоровье!

Все еще не понимаете? следи за картинкой

Answer 19

Добавление для дальнейшего использования

      @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Это должно решить проблему.

Answer 20

Используя VScode, откройте настройки пользователяCTRL + ,

Поиск неизвестных в правилах

Измените Lint с предупреждения на игнорирование

Answer 21

Если попутный ветер css не работает, а также возникает ошибка, вызванная неизвестным правилом, вам необходимо построить его заново. Например, если вы работали в локальной среде, вы можете выйти с помощью ctrl + c и беги npm run dev снова, чтобы создать нормальный чистый файл CSS, который позволит работать с попутным ветром CSS.

Это именно та проблема, с которой я столкнулся, и то, как я смог ее решить.

Answer 22

Я вижу много ответов, которые советуют вам «игнорировать» ошибку в файлах конфигурации. Для меня это плохая идея, а не ответ.

Чтобы это исправить, я используюimportиз «базового CSS» вот так:

      @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Answer 23

введите здесь описание изображения Для Vue 3, возможно, вы попытаетесь установить расширения поддержки Vue 3

Answer 24

Вам просто нужно добавить тезисы в

• щелкните файл> настройки> settings.json

       "css.lint.unknownAtRules": "ignore",
"css.validate": true,
"scss.validate": true,

добавьте этот код в settings.json

Answer 25

мы можем удалить эту ошибку, установив расширение PostCSS Language Support из панели поиска расширений.