Домашняя страница Tailwind CSS
  1. Начало работы
  2. Настройка редактора

Поддержка синтаксиса

Tailwind CSS использует множество пользовательских at-правил CSS, таких как @tailwind, @apply и @config и во многих редакторах это может вызывать предупреждения или ошибки, когда эти правила не распознаются.

Решением этой проблемы почти всегда является установка плагина для вашего редактора/IDE для поддержки языка PostCSS вместо обычного CSS.

Если вы используете VS Code, наш официальный плагин Tailwind CSS IntelliSense включает специальный языковой режим Tailwind CSS, который поддерживает все пользовательские at-правила и функции, которые использует Tailwind.

В некоторых случаях вам может потребоваться отключить встроенную обработку/проверку CSS, если ваш редактор очень строго придерживается синтаксиса, который он ожидает в ваших файлах CSS.

IntelliSense для VS Code

Официальное расширение Tailwind CSS IntelliSense для Visual Studio Code расширяет возможности разработки Tailwind, предоставляя пользователям расширенные функции, такие как автозаполнение, подсветка синтаксиса и линтинг.

Tailwind CSS IntelliSense extension for Visual Studio Code
  • Автозаполнение. Интеллектуальные предложения по именам классов, а также функции и директивы CSS.
  • Линтинг. Подчеркивает ошибки и потенциальные ошибки как в вашем CSS, так и в разметке.
  • Предварительный просмотр при наведении. Просмотрите полный CSS для имени класса Tailwind, наведя на него курсор.
  • Подсветка синтаксиса. Предоставляет определения синтаксиса, чтобы функции Tailwind выделялись правильно.

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

Автоматическая сортировка классов с Prettier

Мы поддерживаем официальный плагин Prettier для Tailwind CSS, который автоматически сортирует ваши классы в соответствии с нашим рекомендуемым порядком классов.

Он без проблем работает с пользовательскими конфигурациями Tailwind, а поскольку это всего лишь плагин Prettier, он работает везде, где работает Prettier, включая все популярные редакторы и IDE, и, конечно же, в командной строке.

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

Ознакомьтесь с плагином на GitHub, чтобы узнать больше и начать работу.

JetBrains IDEs

IDE JetBrains, такие как WebStorm, PhpStorm и другие, включают поддержку интеллектуальных завершений Tailwind CSS в вашем HTML и при использовании @apply.

Подробнее о поддержке Tailwind CSS в JetBrains IDEs →