Настройка Tailwind CSS Intellisense в коде VS

Холла,

Tailwind — это первый фреймворк, который завоевал популярность за очень короткий промежуток времени.
Он ускоряет написание и поддержку css кода вашего проекта.
Согласно официальному сайту tailwind css, это высоко настраиваемый, низкоуровневый CSS фреймворк.
Он также позволяет легко создавать сложные отзывчивые макеты.

В коде VS доступно множество расширений, для легкой интеграции классов tailwind также предоставляет расширение, которое позволяет нам быстрее использовать встроенные классы.

Tailwind CSS IntelliSense — это расширение, доступное в marketplace, которое предоставляет Tailwind Labs.

Мы рассмотрим, как его установить и использовать в VS Code.

Откройте маркетплейс расширений VS Code
Найдите Tailwind CSS Intellisense и установите, а после установки убедитесь, что в вашем рабочем пространстве есть файл tailwind config с именем tailwind.config.js или tailwind.config.cjs, чтобы активировать его.
Настройте его в настройках или вы можете отредактировать файл settings.json

On Windows/Linux — File > Preferences > Settings
On macOS — Code > Preferences > Settings

Вход в полноэкранный режим Выйти из полноэкранного режима

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

"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,

Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все, перезагрузите код VS и начинайте использовать его.

Спасибо за прочтение
🦄 ❤️