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!