Home
Jamstack Explorers
Menu

Building with SvelteKit and GraphCMS with Scott Spence

Styling with Tailwind and DaisyUI

Okey dokey, the final lesson. This is an optional lesson. And I've intentionally left the whole project unstyled. And because this is an optional thing, currently myself, I prefer to use tailwind and the daisy UI components library. SvelteKit has a great tool for adding Tailwind directly to your SvelteKit projects is called Svelte add. And this is just a one option here. Let's copy this and go over to the terminal. And I'm just going to paste this in and hit enter. If we go back to the GitHub page, one thing to note is that just in time mode is enabled by default. You can go to this page here to get a bit more information about just in time in Tailwind. But that's it for that. Close this. Let's close all of these other tabs, we just want to concentrate on our localhost, get rid of those so we're localhost 3333. And one other thing I want to add, as a dev dependency is Daisy UI. Let's MPM instal everything. So if we check out Daisy UI, we'll see there is a add in for tailwind. Let's just go over to the components here. And instal it's a plugin sorry, not a add in, we can go over to the tailwind config, which should have been created in our explorers project over to VS code again. And luckily, I have the source control. Open already, we can see what's changed. So we've had a tailwind config added here Svelte config, post CSS, config. And these added to our package Json. And we've got app dot post CSS. And layout file, let's go over to Explorer. I prefer to have just CSS rather than post CSS for my tailwind config. And you might notice that in layout is just importing the file here. So if we hit save, and let's close the sidebar here and move this over to the right, and go over to localhost. And we're going to need to start a dev server that's npm run Dev, and then we're passing in the option for the port, which is 3333. Now if we go over to the browser, setting up VS code in the side here, we can see that the default styles have already gone. Let's go back to the homepage. And it doesn't look great. At the moment. Let's get Daisy UI configured. So I'm gonna need to open up my tailwind config file and put Daisy UI into the plugins here. Let's go back over to Daisy UI. Copy that put that in here. Hit save, and it looks like Daisy UI is running already. I'm just going to be on the safe side, I'm going to stop and start the dev server again. Now we'll see that we've got some default styles kicking in from Daisy UI. This theme here is the default one, which is dark, I want to choose corporate, I think let's go corporate. Yep. So with the themes, you just need to add the theme you want in your HTML tag. So in our projects here, if we go to let's pop out the Explorer, and this will be in the app HTML file here. Let's close that sidebar. And we want to put this inside this HTML tag here. Let's just get that in there. And I want to use corporate maybe refresh the browser here. There we go. Right so it's not looking great. I'm just going to quickly rattle through adding in some styles. Just that looks a bit more presentable. So first up, I think, going to add some base styles to the layout. So let's go over to the layout file here is use Ctrl P and to say layout, then go to File Open so. We have our header, wrap all of this in a div.

Just down here, hit save in the class here, I'm just going to paste these in. Okay, so if we go over to our main page here and make this a bit bigger, we've got some default width, constrained width, just so it's centred. Now over to the Index page, change this title, putting some classes. Okey dokey, add some styles to this p tag. Nice, nice, nice. For the unordered list, we'll put some styles in the list item here. We have a border where we're using the primary class, and we have the rounded class, I got some margin padding and transition on hover to Sue's not quickly snap it onto it let's put a bit of styling on the h2 here. Okay, and let's put a better date format in here. Okay, sweet, let's go to the about page next Ctrl p about, and some minimal styles in here. Let's just paste these in here. Let's go over to the about page. So we're using the same size text as we were on the Index page here, adding some margin to it. And the same with the next paragraph. Save that. Let's go over to the slug page now

Let's go over to one of the pages. So here we're going to use the same size text again, as we did for the h1 on the index and the about page let's add some classes to our time tag here. And then for each p tag save that, put this in as xl text. And I'll quickly start with the section tag this just paste this in actually because it is quite big.

Okay, for our section, again, we are trying to keep the text sizing consistent. Same for our Flickr images. Just putting a nice margin on them. And then lastly, let's do the rocket and the rocket name paste these in again. Again, for the text size trying to keep it consistent throughout. And that's it for the slug page, Let's just hit save on this. And then lastly, we want to have a nice header up here. So I've just got the header component. Let's pull this out. This is a bit basic at the moment. So let's just paste these in here. Like that. And this is a Daisy UI component literally taken from

taken from here navbar pop these styles in. And that's it, we're done for that. Make this a bit bigger. There we have it so we can click our links and click around to your heart's content. There we have it. We've gone from HelloWorld in SvelteKit to a site which consumes a GraphQL endpoint and uses endpoints in SvelteKit. Hope you found it useful. And I'll see you around. Thanks a lot. Bye bye

Explorers

your progress

1212