Как использовать Tailwind CSS со Svelte

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

  • Создание приложения Svelte
  • Установка и настройка Tailwind в приложении Svelte
  • Создание кнопки многократного использования с помощью Svelte и попутного ветра
  • Различные варианты настройки с помощью CSS и Svelte.
  • Проектирование компонентов с помощью CSS попутного ветра и Svelte
  • Управление состояниями и событиями в компонентах Svelte с помощью Tailwind
  • Интеграция служебных классов CSS Tailwind с анимацией Svelte
  • Заключение

В этой статье мы узнаем, как использовать CSS Tailwind со svelte.

Создание приложения Svelte

Давайте создадим приложение Svelte, а затем добавим к нему попутный ветер.

Введите приведенный ниже код, чтобы инициализировать новый проект.

npm init svelte@latest demo-app
cd demo-app

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

После установки приложения запустите

npm install

установить все зависимости

затем запустите команду ниже

npm run dev

чтобы запустить приложение

это запустит ваше приложение на локальном хосте 5173.

Установка и настройка Tailwind в приложении Svelte

У нас запущено приложение Svelte, давайте добавим в проект попутный ветер.

Шаг 1: чтобы установить попутный ветер, введите этот код в свой терминал

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Шаг 2: затем откройте файл svelte.config.js

там импортируйте vitePreprocess и добавьте предварительный процесс в конфигурацию вот так

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},
	  preprocess: vitePreprocess()
};

export default config;

Шаг 3. После этого откройте файл tailwind.config.js, чтобы настроить пути шаблона, например

Эта статья предоставлена ​​вам DeadSimpleChat, Chat API и SDK для вашего сайта и приложения.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Шаг 4. После этого создайте новый файл с именем app.css в папке ./src.

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

Шаг 5. Создайте файл svelte с именем +layout.svelte в ./src/routes/+layout.svelte и импортируйте файл app.css.

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

<slot />

Шаг 6. Запустите приложение

npm run start

Шаг 7. Начните использовать попутный ветер в своем приложении.

При использовании Tailwind не забудьте добавить lang="postcss" для всех блоков <style>, которые необходимо обработать попутным ветром.

<h1 class="text-3xl font-bold underline">
    We are running tailwind in Svelte!
  </h1>
  
  <style lang="postcss">
    :global(html) {
      background-color: theme(colors.indigo.100);
    }
  </style>

Пример: создание кнопки многократного использования с попутным ветром и Svelte

Давайте создадим многоразовую кнопку с попутным ветром и Svelte Kit.

Шаг 1.Создание файла компонента кнопки

В нашем приложении Svelte создайте новый файл компонента Svelte и назовите его Button.svelte.

Создайте этот файл в папке src/lib. Вы можете сделать это через пользовательский интерфейс в VS Code или использовать терминал.

touch src/lib/Button.svelte

Шаг 2. Создание компонента

В файле Button.svelte напишите приведенный ниже код.

Эта статья предоставлена ​​вам DeadSimpleChat, Chat API и SDK для вашего сайта и приложения.

<script>
    export let buttonText = "Reusable Button";
    export let buttonStyle = "bg-blue-200 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300";
    export let textSize = "base";
  </script>
  
  <style>
    .base {
      @apply text-white font-bold py-2 px-4 rounded cursor-pointer;
    }
  
    .sm {
      @apply text-sm;
    }
  
    .base {
      @apply text-base;
    }
  
    .lg {
      @apply text-lg;
    }
  </style>
  
  <button class="{textSize} {buttonStyle}">
    {buttonText}
  </button>

Что мы здесь делаем?

Мы экспортируем сюда три реквизита.

  • buttonText: для текста, отображаемого на кнопке.
  • buttonStyle: определить стиль кнопки.
  • textSize: размер текста внутри кнопки.

В разделе стилей у нас есть служебные классы попутного ветра для кнопки.

Здесь мы используем директиву @ для применения служебных классов попутного ветра.

Наконец, мы определяем кнопку с помощью классов попутного ветра и buttonText.

Шаг 3. Использование компонента «Кнопка» на нашей странице Svelte.

Мы собираемся использовать компонент кнопки, который мы только что создали, на нашей стройной странице.

откройте +page.svelte и импортируйте в него Button.svelte

нравиться

<script>
  import Button from '$lib/Button.svelte';
</script>

<main class="space-y-2">
  <Button buttonText="Primary Button" buttonStyle="bg-blue-500 hover:bg-blue-700" size="sm" />

  <Button
    buttonText="Secondary Button"
    buttonStyle="bg-green-500 hover:bg-green-700 focus:ring-green-300"
  />

  <Button buttonText="Danger Button" buttonStyle="bg-red-500 hover:bg-red-700" size="lg" />
</main>

В этом примере мы создали svelte-приложение и создали три кнопки с помощью CSS попутного ветра.

Различные варианты настройки с помощью CSS и Svelte.

  1. Изменение цвета кнопки

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

<main class="space-y-2">
  <Button buttonText="Primary Button" buttonStyle="bg-blue-500 hover:bg-blue-700" />
  
  <Button
    buttonText="Secondary Button"
    buttonStyle="bg-green-500 hover:bg-green-700"
  />

  <Button buttonText="Danger Button" buttonStyle="bg-red-500 hover:bg-red-700" />
  
  <Button buttonText="Info Button" buttonStyle="bg-indigo-500 hover:bg-indigo-700" />
</main>

2. Добавление значков к кнопкам

Вы также можете легко добавить значки к кнопкам. Для этого установите пакет Heroicons npm.

npm install svelte-hero-icons

Теперь давайте изменим наш компонент Button.svelte, чтобы он принимал новое приглашение icon, и включим значок в разметку.

<script>
// Importing from svelte-her-icons
    import { Icon, ArrowUp, } from "svelte-hero-icons";
    export let buttonText = "Reusable Button";
    export let buttonStyle = "bg-blue-200 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300";
    export let textSize = "base";
  </script>
  
  <style>
    .base {
      @apply text-white font-bold py-2 px-4 rounded cursor-pointer;
    }
  
    .sm {
      @apply text-sm;
    }
  
    .base {
      @apply text-base;
    }
  
    .lg {
      @apply text-lg;
    }
  </style>
  
  <button class="{textSize} {buttonStyle}">
    <Icon src="{ArrowUp}" size="32"/>
    {buttonText}
  </button>

В приведенном выше примере мы импортировали пакет Heroicons и добавили значки стрелок к нашим кнопкам.

Дизайн компонентов с использованием CSS Tailwind и комплекта Svelte.

В этом разделе мы рассмотрим проектирование компонентов с помощью попутного ветра и комплекта Svelte.

Мы собираемся изучить проектирование компонентов на примере.

Шаг 1. Компонент карты

В нашем проекте создадим новый файл Card.svelte в каталоге src/lib.

touch src/lib/Card.svelte

Шаг 2. Создание компонента из небольших частей многократного использования.

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

Давайте создадим части компонента нашей карты.

  • CardHeader
  • CardBody
  • CardFooter

Создадим для этих компонентов отдельные файлы в директории src/lib.

touch src/lib/CardHeader.svelte
touch src/lib/CardBody.svelte
touch src/lib/CardFooter.svelte

Шаг 3. Создание подкомпонента

Мы создадим подкомпоненты с использованием слотов, что поможет нам создавать настраиваемые компоненты, а также с внедрением контента.

CardHeader.svelte

<script>
  export let title = "Card Title";
</script>

<header class="bg-blue-200 text-white p-4">
  <h2 class="text-xl font-bold">{title}</h2>
  <slot name="actions" />
</header>

CardBody.svelte

<div class="p-4">
  <slot />
</div>

CardFooter.svelte

<footer class="border-t p-4">
  <slot />
</footer>

Шаг 4. Создание основного компонента карты

Далее мы объединим подкомпоненты для создания файла компонента main.svelte.

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

main.svelte

<script>
  import CardHeader from "./CardHeader.svelte";
  import CardBody from "./CardBody.svelte";
  import CardFooter from "./CardFooter.svelte";
</script>

<div class="w-full md:w-1/2 lg:w-1/3 border shadow-lg rounded overflow-hidden">
  <slot name="header">
    <CardHeader />
  </slot>
  <slot name="body">
    <CardBody />
  </slot>
  <slot name="footer">
    <CardFooter />
  </slot>
</div>

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

<script>
  import Card from "$lib/Card.svelte";
  import CardHeader from "$lib/CardHeader.svelte";
  import CardBody from "$lib/CardBody.svelte";
  import CardFooter from "$lib/CardFooter.svelte";
</script>

<style>
  .button {
    @apply bg-blue-600 py-2 px-4 text-white rounded mt-2;
  }
</style>

<main class="flex space-x-8">
  <Card>
    <CardHeader slot="header" title="Header Slot" />
    <CardBody slot="body">
      <p>Some Card Component goes here</p>
    </CardBody>
    <CardFooter slot="footer">
      <button class="button">Footer</button>
    </CardFooter>
  </Card>

  <!-- 2 card example -->
  <Card>
    <CardHeader slot="header">
      <h2 class="text-xl font-bold text-blue-500">No actions</h2>
    </CardHeader>
    <CardBody slot="body">
      <p>Some next card component goes here</p>
    </CardBody>
  </Card>
</main>

В приведенном выше примере мы добавили компонент карты в две отдельные конфигурации.

Таким образом, мы можем повторно использовать и поддерживать один компонент карты в нескольких местах и ​​в разных конфигурациях.

Таким образом, создание меньших повторно используемых компонентов и их последующее объединение для создания более крупных компонентов приводит к более гибкому проектированию.

Интеграция служебных классов Tailwind с анимациями Svelte

Мы встроили поддержку анимации и переходов в Svelte. Давайте посмотрим, как мы можем интегрировать служебные классы попутного ветра со стройной анимацией.

Шаг 1. Импорт анимации и замедления Svelte

Чтобы добавить анимацию в Svelte, мы импортировали функции анимации и плавности из модулей svelte/animate и svelte/easing.

<script>
  import { fly } from "svelte/animate";
  import { cubicOut } from "svelte/easing";
</script>

Шаг 2. Добавление служебных классов Tailwind в анимацию Svelte

Нам нужно определить конфигурацию анимации с помощью директивы animate в разметке нашего компонента и применить служебные классы по своему усмотрению.

<div
  class="bg-blue-00 text-white text-center py-2 px-4 my-4 rounded shadow"
  in:fly="{{ y: -50, duration: 300, easing: cubicOut }}"
  out:fly="{{ y: 50, duration: 300, easing: cubicOut }}"
>
 	Animating the text(fly)
</div>

Мы применяем CSS bg-blue-200, text-red px-4 и другие служебные классы попутного ветра для стилизации, одновременно используя анимацию Svelte fly для переходов in и out.

Шаг 3. Анимируйте несколько элементов одновременно

Мы можем создавать одновременные анимации, используя svelte и попутный ветер. Для этого нам нужно использовать блоки each вместе с директивой animate.

<script>
  let notifications = [
    "New website!",
    "Svelte + Tailwind utility classes",
    "We are animating the classes!",
  ];
</script>

{#each notifications as notification, index (index)}
  <div
    class="bg-green-500 text-white text-center py-2 px-4 my-4 rounded shadow"
    in:fly="{{ y: -50, duration: 300, delay: index * 50, easing: cubicOut }}"
    out:fly="{{ y: 50, duration: 300, delay: index * 50, easing: cubicOut }}"
    key="{index}"
  >
    {notification}
  </div>
{/each}

Здесь мы создали список уведомлений и использовали each для рендеринга элементов.

В уведомлениях We are fly анимаций при входе и выходе.

Мы интегрируем CSS-утилиту Tailwind со Svelte. Используя это, вы можете создавать потрясающие анимации, а также оптимизировать производительность.

Преимущества и преимущества использования Svelte с Tailwind

Наконец, давайте рассмотрим некоторые преимущества и преимущества использования svelte при попутном ветре.

  1. Подход, ориентированный на полезность
  2. Ограниченные стили и возможность создавать компоненты
  3. Легко структурировать адаптивный дизайн
  4. Небольшой размер пакета CSS
  5. Полностью интегрированный опыт разработчика
  6. Подход «сначала полезность»: Tailwind придерживается подхода «сначала полезность». Это дает вам контроль над стилем, упрощает стиль и повышает согласованность в проекте.
<!-- Styling a button with tailwind -->
<button class="bg-blue-500 hover:bg-blue-200 text-white font-bold py-2 px-4 rounded">
	Super Buy Now
</button>

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

<!-- Button.svelte with tailwind -->
<style>
  .container {
    @apply bg-blue-200 hover:bg-blue-300 text-white font-bold py-2 px-4 rounded;
  }
</style>

<button class="container">
  Buy Now
</button>

3. Создавайте адаптивный дизайн. Svelte имеет встроенные адаптивные и реактивные компоненты, а попутный ветер также поддерживает адаптивный дизайн с простыми в использовании точками останова.

<!--  Tailwind responsive layout-->
<div class="container mx-auto px-4 md:px-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="bg-white p-4 shadow rounded">
      <!-- Svelte Component or content here -->
    </div>
    <!-- Other columns... -->
  </div>
</div>

4. Минимальный размер пакета CSS:В Tailwind 3 в пакет включены только используемые классы, что уменьшает размер пакета CSS. Также в Tailwind 2 с очисткой CSS размер пакета CSS значительно уменьшается.

5. Интегрированный опыт разработчика: с помощью Svelte и Tailwind можно легко интегрировать в один файл разработки, что позволяет избежать переключения между файлами CSS и файлами Svelte.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

Управление состояниями и событиями в компонентах Svelte с попутным ветром

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

Шаг 1. Создайте компонент Svelte с попутным ветром

Мы создаем новый компонент под названием Counter.svelte и внутри него есть тег <script>. Мы также объявили переменную с именем count.

Затем мы добавляем к нему служебные классы Tailwind для придания стиля.

<script>
  let count = 0;
</script>

<div class="bg-white shadow-md rounded p-4 w-full max-w-xs mx-auto">
  <p class="text-xl font-semibold text-gray-800">People: {count}</p>
</div>

Шаг 2. Добавление кнопок для обновления состояния

Далее мы создадим кнопку для изменения состояния и добавим служебные классы попутного ветра для стилизации.

Мы также добавляем прослушиватели событий к событию click с помощью директивы Svelte on: и будем обновлять счетчик при нажатии кнопки.

<script>
  let count = 0;

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }
</script>

<!-- Add buttons to change the state -->
<div class="bg-white shadow-md rounded p-4 w-full max-w-xs mx-auto">
  <p class="text-xl font-semibold text-gray-800">Counter: {count}</p>

  <div class="flex space-x-2 mt-4">
    <button 
      class="bg-blue-500 text-white py-1 px-3 rounded" 
      on:click="{add}"
    >
      Increment
    </button>
    <button 
      class="bg-red-500 text-white py-1 px-3 rounded" 
      on:click="{subtract}"
    >
      Decrement
    </button>
  </div>
</div>

Шаг 3. Обработка событий с помощью Svelte и попутного ветра

На основании изменений в дочернем компоненте нам необходимо обновить родительский компонент.

Для этого мы собираемся импортировать функцию createEventDispatcher и использовать ее для отправки пользовательских событий.

В файле Counter.svelte мы будем отправлять новое событие countUpadted каждый раз при обновлении счетчика.

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  let count = 0;

  function increment() {
    count++;
    dispatch("countUpdated", { count });
  }

  function decrement() {
    count--;
    dispatch("countUpdated", { count });
  }
</script>

<!-- code -->

В родительском компоненте прослушайте событие countUpdated и при необходимости обновите родительский компонент.

<script>
  import Counter from "./Counter.svelte";
  let totalCount = 0;

  function handleCountChanged(event) {
    totalCount = event.detail.count;
  }
</script>

<Counter on:countChanged="{handleCountChanged}" />

<p>Total count: {totalCount}</p>

Нужен Chat API для вашего сайта или приложения

DeadSimpleChat — поставщик API чата.

  • Добавьте масштабируемый чат в свое приложение за считанные минуты
  • 10 миллионов одновременных онлайн-пользователей
  • 99,999% времени безотказной работы
  • Функции модерации
  • 1–1 Чат
  • Групповой чат
  • Полностью настраиваемый
  • API чата и SDK
  • Готовый чат

Заключение

В этом уроке мы узнали о создании приложения Svelte и о том, как интегрировать Tailwind CSS с приложением svlete.

Спасибо, что прочитали статью. Надеюсь, вам понравилась статья

В этом разделе мы рассмотрим проектирование компонентов с помощью попутного ветра и комплекта Svelte.

Мы собираемся изучить проектирование компонентов на примере.