Why should you use them

Svelte and Tailwind are both incredibly powerful tools but there even better together. Not only is Svelte a favorite amongst Front End devs, but it has the new svelte kit which is one of the fastest ways to deploy a site. Svelte kit uses one of my favorite dev tools Vite which is able to run websites even faster.

Tailwind is not only very similar to vanilla CSS and gives a very small CSS package. In my opinion, tailwind is far superior to vanilla CSS considering it gives good control over everything that regular CSS is able to give, yet it is able to be customized more and runs faster.

Set up SvelteKit

First, we will set up SvelteKit to prepare for Tailwind. Run these in your terminal

npm create svelte my-app
cd my-app
npm i
npm run dev

Now you have a SvelteKit app set up.

Set up Tailwind

Now that we have SvelteKit set up we will add Tailwind to the app. Run these in your terminal.

npm install -D tailwindcss postcss autoprefixer svelte-preprocess
npx tailwindcss init tailwind.config.js -p

You now have the files for Tailwind in the project, but they wont work without setting them up. open the svelte.config.js and paste this in.

import adapter from '@sveltejs/adapter-auto';
import preprocess from "svelte-preprocess";

const config = {
    kit: {
        adapter: adapter()
    },
    preprocess: [
        preprocess({
          postcss: true,
        }),
      ],
};

export default config;

open the tailwind.config.js and paste this in.

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

create an app.css file in the routes file within src and paste this in.

@tailwind base;
@tailwind components;
@tailwind utilities;

everything should be fine by then and enjoy hacking.

Credit to CSS-tricks for the photo