Svelte + Tailwind

Admin Svelte

Используем фреймворк стилей tailwind совместно со svelte.

Плюс использования Tailwind в принципе

Избавление от самостоятельного написания стилей и универсальность.

Минус использования Tailwind в Svelte

Минусы заключается в переизбытке классов в коде:

w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600

Сам по себе svelte сделан, чтобы код читался очень легко и просто, а любой фреймворк, будь то Bootstrap или Tailwind этому точно не способствует.

Для примера код без фреймворков svelte:

<div class="block-container" class:current="{displayElement === i}">
    <div class="block-visible">
        <div class="item block-time">
            <div class="cell time edit">
                <input type="time" bind:value="{done.time}"
                   on:change={updateDoneDateTime(done)}>
            </div>
    </div>
</div>

А теперь представьте, как выглядела бы та же самая конструкция, будь в ней вместо одного-трех классов – по 10. А если то же самое и на весь файл?

Установка tailwindcss

Тем не менее, если это не пугает, то tailwindcss легко интегрировать в svetle.

Устанавливаем tailwindcss, находясь в директории svelte запускаем команду:

npm i -D svelte-preprocess tailwindcss postcss autoprefixer

Затем в файле rollup.js добавляем одну строку:

require('tailwindcss')

В это место:

const preprocess = sveltePreprocess({
        postcss: {
            plugins: [require('tailwindcss'), require('autoprefixer')],
        },
    },
);

Далее в этой же директории создаем конфигурационный файл:

npx tailwindcss init

Появится файл tailwind.config.js. Заходим в него и меняем содержимое на такое:

module.exports = {
  mode: 'jit',
  purge: ['./public/app/index.html', './templates/**/*.svelte'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Важно указать правильные пути к директории index и директории файлов svelte, иначе tailwindcss не заработает.

И последнее. В Index.svelte (самый первый файл) добавляем

<style lang="postcss" global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Все. Теперь можно использовать стили tailwindcss. После компиляции в общий файл стилей будут подключаться только те, что используются в svelte.

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

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte + Tailwind"