В последнее время я все чаще слышу о том, что 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>
Если вы видите, что ваш текст прыгает по экрану, это значит, что вы можете приступать к разработке следующего проекта!