Запуск проекта SvelteKit с помощью TailwindCSS

В последнее время я все чаще слышу о том, что Svelte – это “следующая большая вещь” в мире JavaScript, и я решил попробовать. Будучи большим поклонником TailwindCSS, я хотел поделиться процедурой настройки, чтобы использовать оба этих инструмента в вашем следующем проекте.

Создание проекта SvelteKit

Здесь нет ничего сложного, просто следуйте инструкциям, написанным в документации SvelteKit:

npm init svelte my-app
cd my-app

Установка TailwindCSS

Для следующей части все довольно стандартно и объяснено в документации по TailwindCSS:

# Add TailwindCSS as a dev dependency
npm install -D tailwindcss postcss autoprefixer

# Initialize the tailwind and postcss configuration files
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

Настройка TailwindCSS

После установки зависимостей можно приступить к их настройке.

Во вновь созданном файле tailwind.config.js измените content:

module.exports = {
-  content: [],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Если вы не планируете использовать TypeScript, вы можете удалить ts из массива. То же самое относится и к любому другому варианту.

Учитывая, что SvelteKit не генерирует файл app.css по умолчанию (на момент написания этой статьи), создайте его рядом с app.html и добавьте в него директивы TailwindCSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Затем создайте корневой макет вашего приложения по адресу./src/routes/__layout.svelte и ссылайтесь на только что созданный app.css:

<script>
  import '../app.css';
</script>

<slot />

Если этот синтаксис вам не знаком, вы можете узнать больше о макетах в официальной документации.

Проверяем, что все работает нормально

И последнее, но не менее важное: измените содержимое файла index.svelte на следующее, чтобы проверить нашу конфигурацию:

<h1 class="flex h-screen justify-center items-center text-5xl animate-bounce">
    It works!
</h1>

Если вы видите, что ваш текст прыгает по экрану, это значит, что вы можете приступать к разработке следующего проекта!