I'm a big fan of both tailwind and svelte. I haven't deployed any production apps with svelte yet, but I am eagerly awaiting the sveltekit project and I anticipate i'll be a big user in 2021. To me it affords a nicer developer experience, yet still has many of the features of next.js like serverside routes and all that good stuff. Anyways, that's a post of another day.

This post is about getting up and running with svelte kit quickly using tailwind. I'm sure one day there will be a proper setup and project bootstrapper, but until then these are the steps you'll need to follow.

# Create the project directory
mkdir my-project
cd my-project

# Setup the svelte kit project
npm init svelte@next
npm i -D tailwindcss postcss autoprefixer postcss-load-config prettier-plugin-svelte prettier
npx tailwindcss init

Then create a postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Then create a src/routes/$layout.svelte

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

<main>
	<slot/>
</main>

Finally, modify your svelte.config.js

const sveltePreprocess = require('svelte-preprocess')
module.exports = {
  preprocess: sveltePreprocess({ postcss: true }),
  kit: {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
    adapter: '@sveltejs/adapter-node',

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte'
  }
};

And there you go! You're done, happy building!