Используем фреймворк стилей tailwind совместно со svelte.
Плюс использования Tailwind в принципе
Избавление от самостоятельного написания стилей и универсальность.
Минус использования Tailwind в Svelte
Минусы заключается в переизбытке классов в коде:
Сам по себе svelte сделан, чтобы код читался очень легко и просто, а любой фреймворк, будь то Bootstrap или Tailwind этому точно не способствует.
Для примера код без фреймворков svelte:
<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 запускаем команду:
Затем в файле rollup.js добавляем одну строку:
В это место:
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
);
Далее в этой же директории создаем конфигурационный файл:
Появится файл tailwind.config.js. Заходим в него и меняем содержимое на такое:
mode: 'jit',
purge: ['./public/app/index.html', './templates/**/*.svelte'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
И последнее. В Index.svelte (самый первый файл) добавляем
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
Все. Теперь можно использовать стили tailwindcss. После компиляции в общий файл стилей будут подключаться только те, что используются в svelte.
