In this episode, we kick things off by talking about how we're going to enhance our application’s structure. To do that, we’ll be adding more routes, setting up middleware, and improving the way our pages look by introducing Tailwind CSS. But don’t worry if you’re not using Tailwind—while the examples are based on it, you can still follow along and adapt the styles to your own setup.
First up, we walk through installing Tailwind CSS and all its dependencies in our Vite project. After that, we create a Tailwind config file and make sure it points to where our component files live, so it knows where to look for Tailwind utility classes.
We also show how to pull Tailwind’s base styles into our main CSS file, so everything is set up correctly. Then, we start up our dev server and check out our app in the browser. Things might look a bit odd at first, but that’s expected!
To fix up forms specifically, we also install the Tailwind forms plugin, add it to the config, and check how that changes the look and feel of our form elements.
That wraps up the setup! In the next episodes, we’ll start making everything look a lot nicer and flesh out more features. Let’s get started!