Installing Inertia from Scratch
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

0%
Your progress
  • Total: 1h 7m
  • Played: 0m
  • Remaining: 1h 7m
Join or sign in to track your progress

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.

Episode summary

In this episode, we're diving into how to set up Tailwind CSS with your Inertia-powered Laravel app. We start by pulling up the official Tailwind docs and following the framework installation guide, but tweak it a little to fit the way Inertia structures things.

Here’s the step-by-step of what we do:

  • Install Tailwind, PostCSS, and autoprefixer with npm, since Vite is already set up for us in a modern Laravel app.
  • Generate the Tailwind config file, and (this bit is important) set up the content paths so Tailwind scans both your Blade views and your Vue components (since Inertia apps have a split between PHP and JS). This means pointing to resources/views/**/*.blade.php and resources/js/**/*.vue.
  • After updating the config, we restart the dev server to make sure our changes stick.
  • Then, we update app.blade.php so that, alongside the JS, we also import our main app.css – which is where Tailwind gets loaded.

Finally, we poke around in a Vue component and a Blade file to confirm Tailwind is working by tossing some utility classes in (like making the font bold). Success! Now you can use Tailwind classes anywhere—Vue components, Blade files, you name it. This setup is super flexible for building stylish interfaces quickly throughout your app.

Episode discussion

No comments, yet. Be the first!