This episode is for members only
Sign up to access "Installing Inertia from Scratch" right now.
Get started
Already a member? Sign in to continue
Playing
07. Styling with Tailwind
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
So if you want to pull Tailwind into your Inertia app, here is how we do it. Now, we're going to head over to the Tailwind docs. We're going to head over to the framework guide and we're going to set this up with Vite. And we're just going to follow through these steps, but we're going to do things very slightly differently
00:16
because we are working with an Inertia app, which has a slightly different structure to it. So we've already created our app and Vite comes with Laravel, so we don't need to do that. First thing I'm going to do is install Tailwind, PostCSS and the auto-prefixer. Let's go ahead and pull these in.
00:32
Next up, we're going to generate out a Tailwind config file. Really important because we need to define where Tailwind looks for its content. So that's gone ahead and created a Tailwind.config.js file in the root of our project. So while we're here, what we can do is fill in this content section,
00:48
which is where Tailwind is going to look for any Tailwind classes to compile the final small CSS file that it's going to use. So if we think about our app structure, the way that we've done this, usually what we would do is point this over to resources and views, which we do need to do because we might need to add some base styles to our app.
01:07
But we also need this to be anywhere within JS. So any of these pages that we're creating will also have Tailwind styles in there as well. So the first one is going to be in that resources folder under views. And then we can go into here and say anything with a blade extension,
01:26
and then we can do a similar thing, but under resources and JS and of course, anything with a view extension. And you can customize these. You can add vendor folders to this, whatever you need to do. But this is pretty much enough for the way that we've set the structure up for now.
01:41
So now that we've done this, let's just go and cancel off npm run dev and rerun it just in case. And then we're going to go over to app.blade.php, and we're going to pull in as well as the JS file here under Vite. We're also going to pull in our main CSS app file.
01:56
So I think that's under CSS and app.css. Let's just open that up and check. And yeah, so we just need to load Tailwind into here now, and that's going to be pulled into our app.
02:08
So it works nicely. So I've already got these in my notes. They're also over on here, just here, and we should be good to go. So there we go.
02:18
You can already see that's changed. Tailwind's base defaults or styles have kicked in, and you can see that we should now just be able to start working on this. So for example, over on our homepage, let's go ahead and just set a font of bold in here and just see this work.
02:36
So if we just head back to our homepage, there we go. So we now have Tailwind installed. We can use that pretty much anywhere now in our view templates, which is really handy, but we can also use that inside of app.blade.php and any other blade files that we create as well.
14 episodes•1 hr 7 mins•2 years ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!