Playing
03. Installing Tailwind
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
Transcript
00:00
Okay so to style everything up we're going to be using Tailwind, feel free to choose a different option it doesn't really matter but let's go ahead and get this pulled in so we can pretty much rapidly build out our components, so we're going to be pulling in Tailwind but we're also going to be pulling in the Tailwind forms plug-in which is going to kind of reset our forms back to
00:17
a nice state so we can style them and this just makes it really easy particularly because we're going to be having a lot of forms on here, okay so let's go ahead and pull this in we're going to head over to the docs and we're going to go over to the framework guide, now we can either choose Laravel or Vite because technically we're using both here but I'm just going to roll with
00:34
a Laravel example and then we'll make some adjustments, so we've already created a project let's go ahead and pull in the Tailwind dependencies that we need here and then the next step is to generate out the Tailwind config file so we can make any adjustments in there and of course put our plugins in as well, so let's go ahead and generate that, that will have created
00:52
a Tailwind config file in our root and we can get that plug-in installed, let's go through the rest of the steps first, so the really important part about this is where we target any Tailwind classes that we've used, so we're not really making use of blade files here unless we were adding any styles to our overall wrapper, so we're just going to target view files but if you find that your
01:15
Tailwind classes are not being found you can just add more references here, so we're going to grab this line here resources and view and we're going to place this into our content and I'm just going to go ahead and re-indent these, so that goes into there and we look inside the resources directory which is just here and we look inside of any of these files, so we could technically go into
01:35
resources and js and look inside of here and obviously if we apply any styles to our home page then the styles will be compiled in, so let's leave that as it is for now and let's move on, okay so we need to pull in all of the Tailwind css stuff into our app css file, remember earlier we went ahead and included our css file in our byte config just here, so all of that will be injected into
02:01
the page for us and then we're just going to go ahead and re-run npm run dev and see if this has worked, so let's go ahead and just cancel off npm run dev and we'll just re-run that and let's head over to the browser and see if there's a difference and sure enough there is, so Tailwind is now pulled in, okay so what we're now going to do is just very quickly hop over to our home page and
02:24
I'm going to go ahead and output an input type of text in here and let's just see what this looks like on the page, it's pretty invisible by default, let's go ahead and get this Tailwind forms plugin pulled in and we'll see this slightly change and this is just going to make it a little bit easier for us to reset and style our forms, so very easy to pull this in, we're just going to go ahead and
02:44
do an npm install on Tailwind forms and then we're going to go and require this plugin into our Tailwind config, so let's head over to our Tailwind config file and let's require that plugin in just inside of here, okay let's head over to our home page and there we go, so we've got a nice base now to style up our forms of course which we're going to be including a lot of, okay so
03:07
finally let's go ahead and just get rid of that form from here and we're going to move on to probably the most complex part of the course which is styling up the navigation, so let's head over to that next episode, get that done and then we can start to do a little bit more setup and get the rest of this functionality built out.
40 episodes•5 hrs 21 mins•1 year ago
Overview
Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.
Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.
Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!