Add TailwindCSS to a SvelteKit project

2022-06-04

The installation

Adding

Tailwind CSS

to a

Svelte Kit

project. To do this using the

npx

command for :

$ npx svelte-add@latest tailwindcss

The installation seems to have added the following to the top of the script element body in the src/routes/__layout.svelte file.

<script>
	import '../app.css';
	...
</script>

However it lower-cased all the XML element names in the file and broke the navigation. For example it changed the following from:

<header><Header /></header>

<header><header /></header>

Notice the middle header element, which is a

Svelte

component that implements the header fucnctionaly for this site. It’s wrapped by the

element.

It took me ~15 minutes to figure out what was going on and fix it.

I also added the

Tailwind CSS typography plugin

and manually updated the following in this src/routes/__layout.svelte file:

<div class="container prose max-w-none">

and added the following to the tailwind.config.cjs file.

const config = {
	...
	plugins: [require('@tailwindcss/typography')]
    ...
};

module.exports = config;

I’m also using the

NPM mdsvex module

for

Markdown

support, and it seems to have broken the in-line code fencing functionality (the one using the back-tick `).

I haven’t figured out how to fix this one yet.