Add TailwindCSS to a SvelteKit Project and Build a NavBar Component
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.
Instructor: [0:00] Now that we understand how layouts work, let's get a little bit more practice by installing Tailwind and creating a navbar components. We can come into our terminal. Let's go ahead and run npm-install as a div dependency Tailwind CSS, PostCSS, and Autoprefixer.
[0:21] Then we want to create our Tailwind config, so we can run npx Tailwind CSS init. Tell it to put that in Tailwind.big.cjs. All right, it created a Tailwind config for us and a post CSS config for us. In our Tailwind config, all we need to do is come into this content and point our Tailwind config where we want to be able to write Tailwind CSS.
[0:54] We're going to tell it to look in this source directory at anything that ends in .html, JavaScript, Svelte, or TypeScript. We can save that.
[1:17] Then we need to come into our source and create a new file, app.css, and give it all of our Tailwind directives and utilities. We'll save that. Then, in our layout.svelte, we can come in here, and since this layout is persisted to all the children layouts, we can give it the script tag and import our app.css. We save that.
[2:03] Obviously, currently nothing's happening, so let's go ahead and tell the setup, let's give it a class name. Now the class name is 300 class of text-red 500, and save. There we go. It's working. Now we can tell it we want the text to be extra-large. Let's make this 3xl. OK, cool. Then, this will work.
[2:43] We can come into our source, let's create a new file, let's say, components/navbar.svelte. Let's create a div that has nav with three items...or let's just give it two for now because we only have...Oh no, we have three routes. Let's do href to Home, and then we'll do another one, About, and then we'll do our last one, which will be Posts.
[3:38] Then, we want this width to be the screen height. Let's tell it to be, let's just say 40. That's probably too big...32. Now we can import our navbar. Instead of this header, let's just put the navbar. We have our big navbar. Let's change the height on this to 20, and let's give these the class name, text-white. If we give that here, it should carry through. Yep, so I can get rid of this.
[4:52] Then, let's just do this x to do start. Then we can just make these a little bigger. Let's make these text-xl. Now, if we click on these, we can go to our different pages and this navbar will stay there. We can go to the About page, which we're already on, we can go Home, and we can go to the Posts.
[5:31] In this lesson, we installed Tailwind and got a little bit more practice with layouts by creating a navbar component and seeing how it persists across our different pages.