Как настроить Svelte с Tailwind CSS

Как установить Tailwind CSS в Svelte, два примера добавления Tailwind CSS в новый проект Svelte.

ℹ️ Обратите внимание, что на момент написания статьи SvelteKit еще не достиг версии 1, но это будет способ по умолчанию для создания новых проектов Svelte, когда SvelteKit достигнет версии 1.

Я пройдусь по настройке проекта по умолчанию с каждой из команд init как в Vite, так и в Svelte. Затем я повторно использую стили на индексной странице обоих проектов, чтобы преобразовать их для использования Tailwind.

В обоих примерах будет использована утилита Svelte Add, и я пройдусь по преобразованию каждого из них из Svelte scoped CSS в Tailwind.

Предварительные условия

Если вы следите за мной и нашли это через поиск, я предположу, что у вас уже есть среда разработки с Node (v14+) и терминал.

С SvelteKit npm init svelte@next

Я запущу новый проект Svelte командой npm init svelte@next и дам ему имя tailwind-svelte.

npm init svelte@next tailwind-svelte
Вход в полноэкранный режим Выйти из полноэкранного режима

Я выберу следующие опции из CLI:

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? › No
✔ Add ESLint for code linting? › No
✔ Add Prettier for code formatting? › Yes
Войти в полноэкранный режим Выйти из полноэкранного режима

Я буду следовать инструкциям из CLI, чтобы изменить каталог в проекте, установить зависимости и инициализировать git, чтобы помочь выделить изменения:

cd tailwind-svelte
npm install # (or pnpm install, etc)
git init && git add -A && git commit -m "Initial commit" # (optional step)
npm run dev -- --open
Войти в полноэкранный режим Выйти из полноэкранного режима

После запуска проекта на сервере разработчиков я быстро проверю, что демо-приложение работает так, как ожидалось, а затем добавлю Tailwind с помощью Svelte Add:

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i
Войти в полноэкранный режим Выйти из полноэкранного режима

После выполнения команды install моя боковая панель управления исходниками в VS Code выглядит следующим образом.

Вот и все! Вся конфигурация, необходимая для использования Tailwind в проекте Svelte! Если это все, что вам нужно было знать, то это здорово! Дальше я буду копировать существующие стили с помощью классов Tailwind.

Теперь начнем с удаления стилей и использования Tailwind!

ℹ️ Как я уже говорил в начале, я буду применять классы Tailwind только к индексной странице (src/routes.index.svelte).

Я начну с удаления <style> для индексной страницы, вот git diff для файла src/routes.index.svelte:

<script context="module">
  export const prerender = true
</script>

<script>
  import Counter from '$lib/Counter.svelte'
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<section>
  <h1>
    <div class="welcome">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  h1 {
-    width: 100%;
-  }
-
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
-  }
-
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: block;
-  }
-</style>
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, вся нижняя секция для тегов <style> удалена, поскольку я буду добавлять классы Tailwind в HTML-элементы.

Чтобы воссоздать классы <section>, я добавил git diff сюда:

+<section class="flex flex-col justify-center items-center flex-1">
+  <h1 class="w-full">
+    <div class="relative w-full pb-[calc(100% * 495 / 2048)]">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

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

Это все для этого файла, если вы хотите заняться остальной частью проекта, обратите особое внимание на файл src/app.css, там определено много глобальных стилей.

Переходим к работе с Vite!

С помощью SvelteKit npm init vite@latest.

Тот же процесс теперь с Vite CLI, я начну с команды npm init vite@next и дам ему имя vite-tailwind-svelte.

npm init svelte@next vite-tailwind-svelte
Вход в полноэкранный режим Выйти из полноэкранного режима

Я выберу следующие опции из CLI:

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
❯   svelte
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем svelte.

? Select a variant: › - Use arrow-keys. Return to submit.
❯   svelte
    svelte-ts
Войти в полноэкранный режим Выйти из полноэкранного режима

Инструкции из Vite CLI практически такие же, как и в Svelte:

Done. Now run:

  cd vite-tailwind-svelte
  npm install
  npm run dev
Войти в полноэкранный режим Выйти из полноэкранного режима

Убедившись, что проект работает без проблем, я инициализирую git, чтобы выделить изменения в коде:

git init && git add -A && git commit -m "Initial commit"
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь пришло время добавить Tailwind с помощью Svelte Add:

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь я могу внести изменения в индексную страницу, которая в этом проекте расположена src/App.svelte.

Снова удаляем <style> со страницы, вот git diff этого:

<script>
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <img src={logo} alt="Svelte Logo" />
  <h1>Hello world!</h1>

  <Counter />

  <p>
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
    the officially supported framework, also powered by Vite!
  </p>
</main>

-<style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
-  }
-
-  img {
-    height: 16rem;
-    width: 16rem;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4rem;
-    font-weight: 100;
-    line-height: 1.1;
-    margin: 2rem auto;
-    max-width: 14rem;
-  }
-
-  p {
-    max-width: 14rem;
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      max-width: none;
-    }
-
-    p {
-      max-width: none;
-    }
-  }
-</style>
Вход в полноэкранный режим Выход из полноэкранного режима

Затем добавляем классы Tailwind к элементам HTML:

<script>
  import logo from "./assets/svelte.png";
  import Counter from "./lib/Counter.svelte";
</script>

+<main class="m-auto text-center p-4">
+  <img class="m-auto h-64 w-64" src={logo} alt="Svelte Logo" />
+  <h1
+    class="font-thin mx-auto max-w-none my-8 text-[#ff3e00] text-6xl uppercase md:max-w-56 md:leading-5"
+  >
    Hello world!
  </h1>

  <Counter />

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Check out <a
+      class="underline underline-dark-500"
      href="https://github.com/sveltejs/kit#readme">SvelteKit</a
    > for the officially supported framework, also powered by Vite!
  </p>
</main>
Войти в полноэкранный режим Выход из полноэкранного режима

Готово.

Заключение

Я создал пару примеров проектов, используя команду npm init для Vite и Svelte. Добавил поддержку Tailwind с помощью Svelte Add и заменил стили индексной страницы в каждом из них на стили Tailwind.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *