Svelte kit and the new Tailwindcss just-in-time compiler just got released. Here's a super quick rundown on how to set them up (updated for tailwind 2.1 on the 8/4/2021):
Remember: Svelte config files need to use the
cjs
extension instead ofjs
Step 1: Set up the project
mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer
Step 2: postcss
Create a postcss.config.cjs
file. Svelte 3 is bundled by Vite which comes with postcss support out of the box.
module.exports = {
plugins: {
autoprefixer: {},
tailwindcss: {},
},
}
Step 3: tailwind config
Create a tailwind.config.cjs
file to enable the just-in-time compiler and add the correct paths to be purged. You can also run npx tailwind init
module.exports = {
mode: 'jit',
purge: ['./src/**/*.svelte'],
}
Step 4: create and import the css file
Add these taggs somewhere in your css so that postcss knows where to insert the tailwind styles. A good place to import these is the $layout.svelte
file.
@tailwind base;
@tailwind components;
@tailwind utilities;
And there you go. If you have any issues you can check out the finished example on github or shoot me a dm on twitter.
Top comments (2)
jit already merge to tailwindcss core on April 6'th,,
blog.tailwindcss.com/tailwindcss-2-1
may you update your post?
Hey, thanks a lot for this post. I had one small issue, this warning pops up when I load a page
dev-to-uploads.s3.amazonaws.com/up...