Настройка проекта с Flowbite

Для начала необходимо создать новый проект на SvelteKit. Это делается через команду:

npm create svelte@latest my-app
cd my-app
npm install

После инициализации проекта и установки зависимостей, следующим шагом будет подключение Flowbite — библиотеки компонентов UI, построенной на Tailwind CSS.

Подключение Tailwind CSS

Flowbite полностью зависит от Tailwind CSS, поэтому его необходимо настроить:

  1. Установка Tailwind CSS и необходимых пакетов:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Конфигурация Tailwind в файле tailwind.config.cjs:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}
  1. Создание глобального CSS файла src/app.css и подключение Tailwind директив:
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Дополнительные стили Flowbite при необходимости */
@import 'flowbite';
  1. Импорт app.css в src/routes/+layout.svelte:
<script>
  import '../app.css';
</script>

<slot />

Установка Flowbite

Flowbite можно установить через npm:

npm install flowbite

Все компоненты Flowbite будут доступны после этого, и их можно использовать в SvelteKit как обычные HTML-элементы с классами Tailwind.

Использование компонентов Flowbite в SvelteKit

Flowbite предоставляет множество компонентов: кнопки, модальные окна, выпадающие списки, табы, аккордеоны и др.

Пример простого аккордеона:

<div id="accordion-flush" data-accordion="collapse">
  <h2 id="accordion-flush-heading-1">
    <button type="button" data-accordion-target="#accordion-flush-body-1">
      Заголовок секции
    </button>
  </h2>
  <div id="accordion-flush-body-1" class="hidden">
    <p>Содержимое первой секции аккордеона</p>
  </div>
</div>

Flowbite автоматически обрабатывает открытие и закрытие аккордеонов через data-атрибуты.

Подключение интерактивных компонентов

Для компонентов, требующих JavaScript (модальные окна, dropdown, tooltip), необходимо импортировать скрипт Flowbite в проект:

import 'flowbite';

Лучше делать это в src/routes/+layout.svelte или в src/hooks.client.js для глобального доступа.

Пример модального окна:

<button data-modal-target="exampleModal" data-modal-toggle="exampleModal">
  Открыть модальное окно
</button>

<div id="exampleModal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center">
  <div class="bg-white p-6 rounded-lg">
    <h3>Заголовок модалки</h3>
    <p>Содержимое модального окна</p>
    <button data-modal-hide="exampleModal">Закрыть</button>
  </div>
</div>

Flowbite через атрибуты data-modal-toggle и data-modal-hide управляет состоянием модалки.

Настройка темизации и кастомизации

Tailwind CSS позволяет легко кастомизировать дизайн Flowbite через theme extension в tailwind.config.cjs. Например, можно добавить свои цвета и шрифты:

theme: {
  extend: {
    colors: {
      primary: '#1E40AF',
      secondary: '#FACC15',
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
}

Все компоненты Flowbite будут автоматически использовать эти кастомные стили.

Динамическая загрузка компонентов

В SvelteKit можно лениво загружать тяжелые UI-компоненты для оптимизации производительности:

<script>
  import { onMount } from 'svelte';
  let Modal;

  onMount(async () => {
    const module = await import('flowbite');
    Modal = module.Modal;
  });
</script>

Это позволяет подключать JS для Flowbite только при необходимости, уменьшая размер основной сборки.

Использование с TypeScript

Для проектов на TypeScript можно добавить типизацию для Flowbite:

  1. Создать flowbite.d.ts:
declare module 'flowbite';
  1. После этого любые импорты и использование компонентов Flowbite не будут вызывать ошибок компиляции.

Советы по структуре проекта

  • В SvelteKit рекомендуется хранить кастомные компоненты Flowbite в src/lib/ui и использовать их через обертки Svelte для повторного использования.
  • Для сложных модальных окон и аккордеонов удобно создавать Svelte-компоненты с пропсами, чтобы не дублировать HTML и JS.
  • Глобальные стили Flowbite лучше подключать один раз в +layout.svelte для всех страниц.

Эта конфигурация обеспечивает полное использование возможностей Flowbite в SvelteKit: от базовой стилизации до интерактивных компонентов с полной кастомизацией.

Оглавление