Svelte + Tailwind

Using a style framework tailwind jointly with svelte

Benefits of using Tailwind in principle

Getting rid of self-writing styles and versatility.

Cons of using Tailwind in Svelte

The downside is the overabundance of classes in the code:

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

By itself svelte made to make the code very easy and simple to read, and any framework, be it Bootstrap or Tailwind it certainly does not contribute to this.

For example, the code without svelte frameworks:

<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}”

Now imagine what the same construction would look like if it had 10 classes instead of one or three. But what if the same for the entire file?

Installing tailwindcss

However, if that’s not intimidating, tailwindcss is easy to integrate into svetle.

Install tailwindcss, while in the svelte directory, run the command:

npm i -D svelte-preprocess tailwindcss postcss autoprefixer

Then in the file rollup.js add one line:

To this place:

const preprocess = sveltePreprocess({
postcss: {
plugins: [require(‘tailwindcss’), require(‘autoprefixer’)],

Next, in the same directory, create a configuration file:

A file will appear tailwind.config.js… We go into it and change the content to this:

module.exports = {
mode: ‘jit’,
purge: [‘./public/app/index.html’, ‘./templates/**/*.svelte’],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
variants: {
extend: {},
plugins: [],

It is important to specify the correct paths to the directory index and svelte file directoriesotherwise tailwindcss won’t work.

And the last thing. V Index.svelte (the very first file) add

<style lang=“postcss” global>
@tailwind base;
@tailwind components;
@tailwind utilities;

Everything. The tailwindcss styles can now be used. After compilation, only those used in svelte will be included in the general style file.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *