Using TailwindCSS with Sveltekit
This post is very outdated, check the new post for an updated version
Earlier this week, Sveltekit beta got released (read all about it here). Since itâs so new, I wanted to try out some stuff, including using it with TailwindCSS. That seemed a little bit more complex than I initially thought.
What is Sveltekit
Sveltekit is very comparable to Nuxt and Next, but with Svelte. It provides server-side rendering, routing and code-splitting. Also, Sveltekit uses Vite right out of the box, which makes it incredibly fast.
Bootstrap Sveltekit
To start a new project is actually very easy with Sveltekit. Just run the following commands in an empty directory:
npm init svelte@next
Then, install your dependencies using yarn
or npm install
. For the rest of
this post Iâll use yarn, but use NPM if you like.
To start up the project using Vite, run the dev
command
yarn dev
Now your newly bootstrapped Svelte app should be running on
https://localhost:3000
Install TailwindCSS
Since Sveltekit is so new, we currently have to use a little workaround to use
TailwindCSS, but I imagine that theyâll introduce PostCSS support in the 1.0
release of Sveltekit. Weâll use the postcss-cli
package to trigger a build of
our PostCSS configuration before we run a build command, which works fine, but
youâll need to rebuild Tailwind every time into a static CSS file which can take
up some time.
So, letâs install TailwindCSS and PostCSS
yarn add -D tailwindcss postcss autoprefixer postcss-cli
Following that, we can create a TailwindCSS configuration file using:
npx tailwindcss init
Now create a tailwind.css
file in src/assets/css/
and add the following
content:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
This will tell PostCSS what utilities youâre using.
Configure PostCSS
Now that we have installed TailwindCSS, we just need to configure Svelte to
actually use it. To do that, create a file called postcss.config.cjs
in the
root of your project and tell it to use autoprefixer
and tailwindcss
to
process CSS files:
module.exports = {
plugins: [require("autoprefixer"), require("tailwindcss")],
};
Now we can add a new script to our package.json
, so it builds TailwindCSS
before the main build:
"scripts": {
"dev": "svelte-kit dev",
"build": "yarn build:tailwind && svelte-kit build",
"build:tailwind": "postcss ./src/assets/css/tailwind.css -o static/assets/css/tailwindoutput.css",
"start": "svelte-kit start",
},
Here we configure a script that will run when yarn build:tailwind
or
yarn build
is triggered. The script will compile tailwind from the local
/src/assets/css/tailwind.css
and add it to the static folder
(/static/assets/css/tailwindoutput.css
) where weâll be able to use it.
Now we can include the file globally by adding the output CSS file as a
stylesheet in the /src/app.html
file.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../assets/css/tailwindoutput.css" type="text/css" />
%svelte.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
</body>
</html>
Now when youâve ran yarn build:tailwind
once, TailwindCSS should work in your
markup!
Donât forget to include the generated TailwindCSS output file to your
.gitignore
if youâre using git.
Add @tailwindcss/jit
To save some more time in the compilation and configuration of TailwindCSS, we
can use the @tailwindcss/jit
package. I dedicated a
whole blogpost about that,
so read it if youâre interested and would like to learn more about that.
Itâs actually easy and I recommend that you use it!
Install the package
yarn add -D @tailwindcss/jit
Tell PostCSS to switch packages by changing require('tailwindcss')
to
require('@tailwindcss/jit')
in postcss.config.cjs
module.exports = {
plugins: [require("autoprefixer"), require("@tailwindcss/jit")],
};
That should do it!