Add TailwindCSS to a SvelteKit Project and Build a NavBar Component

Share this video with your friends

Send Tweet

We will go through and add tailwind to our project and create a simple navbar. Tailwind is an incredibly easy to learn 'utility-first' css framework.

Tailwind has a great CLI to help initialize the set up for use so that we don't have to create every config file by hand.

When you run npx tailwindcss init tailsind.config.cjs -p you'll have the proper postcss and tailwind config files create.

We will then add the tailwind base styles to our global css and point tailwind to all the files we want it to process.

From there we'll get some practice in by building out a <Navbar /> component that will have some basic styles applied.

~ a year ago

his volume is very low