1. TailwindCSS Intellisense, 2. Tailwind Fold, 3. Документация Tailwind и 4. Средство просмотра конфигурации Tailwind.
TL;DR
Все эти расширения доступны в этом пакете расширений VS Code TailwindCSS Kit.
1. Попутный ветер CSS IntelliSense
Tailwind CSS IntelliSense — это мощный инструмент, помогающий разработчикам писать код быстрее и эффективнее. Инструмент предлагает в режиме реального времени предложения для классов CSS Tailwind, уменьшая количество ошибок и улучшая качество кода. Используя IntelliSense, разработчики могут повысить производительность, сократить время обучения и повысить доступность своих приложений. Если вы разработчик, работающий с Tailwind CSS, обязательно воспользуйтесь этой мощной функцией.
2. Попутный ветер
гифка
Это расширение чрезвычайно полезно при работе с Tailwind. Длинный список классов может загромождать html-часть, и это расширение предоставляет отличный способ скрыть их и показать только при необходимости. В дополнение к функциональности по умолчанию, опции хорошо продуманы и подходят практически для любых предпочтений. Например, мне нравится, когда классы разворачиваются, когда я нажимаю на строку, а не на сам класс, и для этого есть опция.
Я дал расширению оценку 5 звезд, но есть одна проблема, которую я хотел бы исправить. Я использую eslint с плагином eslint tailwind, который разбивает длинные классы на несколько строк. Расширение, похоже, не сворачивает классы, занимающие несколько строк.
3. Документация по попутному ветру
гифка
Расширение Tailwind Documentation обеспечивает быстрый доступ к официальной документации Tailwind CSS. Это расширение позволяет разработчикам получать доступ к документации Tailwind CSS непосредственно из редактора VSCode, не открывая браузер и не выходя из редактора.
4. Просмотр конфигурации попутного ветра
Конфигурация Tailwind может сбивать с толку. Они могут расширяться в геометрической прогрессии и затруднять пользователям понимание разрешенной конфигурации. Вот почему я создал это расширение. Он позволяет пользователям просматривать разрешенную конфигурацию Tailwind, а также показывает цвет для любых классов, связанных с цветом (текст-*, bg-*, акцент-* и т. д.).
В будущем я планирую сделать классы интерактивными, поэтому, когда пользователь нажимает на класс, он будет вставлен в раздел html.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
