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

Typescript позволяет нам писать более надежный код, раньше отлавливать ошибки и пользоваться преимуществами Intellisense.

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

Наконец, SCSS позволит вам писать управляемый пользовательский CSS, когда Tailwind недостаточно.

Это просто, и у вас есть варианты

Вся настройка выполняется примерно за 4–5 команд, и это не займет много времени.

Я предоставлю варианты, чтобы вы могли выбрать, использовать SvelteKit или нет, использовать Typescript или нет.

Как настроить

Во-первых, вам нужно решить, хотите ли вы использовать SvelteKit.

Для упрощения вы можете думать о SvelteKit как об эквиваленте Nuxt для Vue или Next для React.

Он обеспечивает SSR, маршрутизацию, макеты, а также вы можете создавать конечные точки API.

Если вы сомневаетесь, я бы порекомендовал использовать SvelteKit.

Сделайте свой выбор и перейдите в соответствующий раздел, там вы сможете выбрать между TS или JS.

SvelteKit

npm create svelte@latest my-app

Командная строка попросит вас выбрать шаблон:

  • Скелетный проект: запуск нового проекта Svelte с нуля, как правило, то, что вам нужно.
  • Демонстрационное приложение SvelteKit: если вы новичок в SvelteKit, вы можете начать с примера кода.
  • Скелетный проект библиотеки: это вариант, который вам нужен, если вашей целью является создание инструмента или библиотеки для Svelte, которые вы можете позже опубликовать в виде пакета npm.

Затем вы можете выбрать JS, TS или их гибрид:

  • Использование синтаксиса Typescript: используйте обычный Typescript, это то, с чем я обычно работаю.
  • Использование Javascript с комментариями JSDoc: это гибридный вариант, при котором вы пишете JS, но аннотируете его вводом комментариев, ознакомьтесь с этой статьей для полного объяснения
  • Нет: если вам просто нужен ванильный JS

Затем он спросит, хотите ли вы использовать ESLint, что я рекомендую вам сделать, так как это стандартизирует ваш код.

Далее он спросит, хотите ли вы использовать Prettier для форматирования кода, я также рекомендую сказать «да».

Дальше драматург, это если хотите E2E тесты, я с ним не знаком, так что тут без мнения. Возможно, вы более знакомы с Cypress и можете использовать его вместо этого, если хотите.

Затем

cd my-app
npm install

Это все, что касается настройки SvelteKit, теперь вы можете перейти к разделу Tailwind.

Стройный

Машинопись

npm create vite@latest my-app -- --template svelte-ts

Ванильный JS

npm create vite@latest my-app -- --template svelte

Затем

cd my-app
npm install

Попутный ветер

Благодаря пакету svelte-add npm это так же просто, как запустить эту команду, и это работает как для SvelteKit, так и для Svelte.

npx svelte-add@latest tailwindcss

Запустите npm install после, чтобы установить зависимости, иначе вы получите кучу ошибок.

Теперь вы можете использовать Tailwind в своем приложении.

Если вы выбрали Svelte, добавьте следующую строку в src/App.svelte, если вы использовали SvelteKit, добавьте ее в src/routes/+page.svelte, чтобы проверить, действительно ли она работает.

npm run dev и перейдите к http://localhost:5173

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

Если вы этого не сделаете, это может быть связано с тем, что какой-то CSS переопределяет классы Tailwind. Убедитесь, что вокруг самого компонента нет блока styles.css или какого-то блока <style> с каким-то цветовым правилом для p элементов.

Если вы используете VSCode, я также рекомендую установить потрясающее расширение Tailwind CSS Intellisense, которое даст вам автодополнение для классов Tailwind. Я нахожу автозаполнение цвета особенно полезным.

СКСС

Если вы также хотите использовать SCSS, все, что вам нужно сделать, это установить sass и node-sass.

npm install sass node-sass

Затем вы можете добавить этот код в файл, как и раньше, чтобы проверить

Теперь вы должны увидеть новый абзац красным цветом.

Наконец, если вы установили SvelteKit с Prettier, вы можете изменить параметр useTabs на false, чтобы у вас были фактические пробелы вместо табуляции для отступов.

Это зависит от личных предпочтений, но я думаю, что пробелы более надежны, поскольку они всегда сохраняют одинаковый отступ между редакторами. Например, при вставке приведенного выше кода в суть он будет отображаться с двумя пробелами (так же, как в VSCode) при редактировании, но в статье он будет отображаться с отступом в 4 пробела.

Все готово

Теперь у вас есть проект, который можно использовать.

SvelteKit уже позаботится о маршрутизации, для Svelte вы захотите добавить одну из библиотек маршрутизатора, если вам это нужно.

Для управления состоянием всего приложения очень просто использовать магазины Svelte, которые можно просто импортировать в любой компонент.

X-state — еще один вариант создания сложной надежной многократно используемой логики. Это потребует некоторого обучения, но это довольно мощно.

Я надеюсь, что вы получите удовольствие от сборки с этой установкой и получите от нее такое же удовольствие, как и я.