Вопрос:
Я хотел бы использовать плагин (daisyUI) для TailwindCSS в одном из моих компонентов Svelte. Похоже, что информация о стилях просачивается из этого компонента и влияет на весь сайт. Как я могу этого избежать?
Я не думаю, что это связано конкретно с daisyUI. Ниже я описываю минимальный воспроизводимый пример на основе sveltekit. Но проблема не связана со свелтекитом. Я сталкиваюсь с этим при разработке веб-расширения, которое не использует sveltekit. Настройка sveltekit предназначена только для минимально возможной демонстрации этого вопроса.
Чтобы проиллюстрировать проблему, я создал скелетный проект sveltekit, а затем добавил один дополнительный компонент svelte, использующий Tailwind. Когда я добавляю плагин, цвет фона моей страницы меняется с белого на серый. Я не понимаю, как это может произойти, насколько я вижу, я использую Tailwind только внутри этого компонента. Но стиль, кажется, протекает.
Минимальный пример на github:
Самый быстрый способ размножения:
git clone [email protected]:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open
Теперь вы можете редактировать tailwind.config.cjs и добавлять/удалять плагин:
plugins: [
//require("daisyui")
],
Пошаговое объяснение
Я хотел бы использовать Svelte вместе с Tailwind и DaisyUI.
Вот минимальная настройка проекта
# choose the skeleton project, typescript syntax and no to everything else
npm create svelte@latest minimum_example
cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui
Теперь отредактируйте tailwind.config.cjs:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
extend: {},
},
plugins: [
//require("daisyui")
],
}
Добавьте новый компонент Svelte под src/components/Problem.svelte:
<p class = "bg-blue-700">Using Tailwind class</p>
<style lang = "postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
И включите его в src/routes/+page.svelte:
<script lang = "ts">
import Problem from "./../components/Problem.svelte";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href = "https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<Problem></Problem>
Вы можете запустить проект с помощью
npm run dev -- -- open
Если вы откроете веб-сайт, вы увидите приложение-скелет sveltekit, а также один абзац с синим фоном (это мой тест, что Tailwind работает). Теперь вы можете раскомментировать плагин в tailwind.config.cjs. Фон страницы станет серым.
Я думаю, что это тема, которая каким-то образом просачивается из плагина Tailwind на весь сайт.
🤔 А знаете ли вы, что...
С Svelte легко интегрировать с серверными API и базами данных.
То, как вы используете попутный ветер со svelte, совершенно неправильно. Ответ tldr — удалить директивы @tailwind и использовать вместо них @apply.
<p class = "my-element">Using Tailwind class</p>
<style lang = "postcss">
.my-element {
@apply bg-blue-700;
}
</style>
Способ, которым стили svelte scopes, заключается в использовании уникального имени класса вместе с вашим настраиваемым селектором, например. .my-element становится .my-element.svelte-x57u2q. Это также означает, что вы должны использовать селектор, чтобы этот механизм области действия мог сработать.
Но с ванильным попутным ветром эти встроенные имена классов должны быть глобальными, чтобы быть полезными, другими словами, «просочившимися». Это дизайн, а не ошибка.
Поэтому, если вы хотите использовать попутный ветер, но также использовать стиль svelte с прицелом, @apply — единственное решение.
В официальном документе есть раздел под названием Использование @apply с CSS для каждого компонента, который раскрывает больше технических деталей, я думаю, что его стоит прочитать.