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:

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: [],
}