There are two types of people in the dev world. The ones that love tailwind and the ones that hate it.
If you are in the first group, then you probably want to use Tailwind in most of your projects because of the benefits you find in it.
I’m using Tailwind on my site and for most of my side projects and demos. But, sometimes, adding TailwindCSS to your projects can be annoying or confusing. In this article, you’ll find how to integrate TailwindCSS with SvelteKit.
First, a bit of background.
sponsor
Tu producto o servicio podría estar aquí
SvelteKit, is the meta-framework that uses Svelte to handle the UI rendering processes (kind of Nextjs for React). It provides different features and functionalities that help you to develop full-stack applications, like router, SSR, build optimizations, CSR, and more. Check the official documentation to read more about it.
On the other hand for this integration, there is TailwindCSS, and unless you’re living under a rock, you should at least listen about it. TailwindCSS and is an utilitiy-first CSS framework that offers a pack full of classes that can be composed to create any design. It is like writing CSS without writing CSS.
Now, to the core of this content.
For this tutorial, I’ll show you how to use a utility package named svelte-add to handle the integrations.
Integrate TailwindCSS into a pre-existing SvelteKit project
One way to add TailwindCSS is to integrate it into a project you already have. Let’s assume that you already have a SvelteKit project and know how to use the terminal.
The only thing you need is to run these two commands
npx svelte-add@latest tailwindcss pnpm install
And you’re done.
The first command (the one that calls npm or pnpmx ) is the one in charge of setting things, creating configuration files, and updating your configurations to use Tailwind (which is a postcss plugin).
The last one, is to update your dependencies (use the package manager of your choice here).
After that, you’re ready to go and use TailwindCSS in your .svelte files.
Integrate TailwindCSS into a new SvelteKit project
The other way of getting this integration done is by creating a project from scratch - In fact, this is the preferred method - What you need here is to execute a different command than the one that the official documentation mention.
npm create @svelte-add/kit@latest my-awesome-app
That will show you a prompt to select any integration you have
For this tutorial, pick TailwindCSS or directly define that in the command line like
npm create @svelte-add/kit@latest my-awesome-app -- --with tailwindcss
That will generate the skeleton SvelteKit application with Tailwind ready to be used. You now need to install dependencies and move on to building your incredible application.
And that’s a wrap, using svelte-add is an easy way to integrate 3rd party libraries/configurations into your SvelteKit project.
😃 Thanks for reading!
Did you like the content? Found more content like this by joining to the Newsletter or following me on Twitter
