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:
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
.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.