Laravel API Development & Vue JS SPA [COURSE]

Laravel API Development & Vue JS SPA – e03 – Tailwind CSS

welcome to level API development with view Jas single page application from scratch the following episode is going to be an

excerpt from the full course now available on udemy if you are interested in developing robust laravel api's with a front-end built on view and tailed when CSS then this is

the course for you we go into great detail talking about things like authentication testing tailwind CSS view j/s levo PHP unit and so much more so I hope you'll join me for the full course

go ahead and click on the link in the description to get sent to the udemy page where you can purchase the full course I hope you enjoy this episode now that we have some routing in place let's

start taking care of our front-end and specifically we're going to pull in the tailwind CSS library to do that let's go ahead and visit the tailwind CSS comm website and let's go ahead and follow

the installation instructions click the getting started button and first and foremost of course npm install is required so let's go ahead and run that command now back in our project simply

paste that command in and this is going to add tailwind CSS as a dependency however this is not enough we still need to add this to our CSS file and what these three commands will do is it will

actually bring in the three tailwind components into our CSS file let's go ahead and copy these three commands head back to phpstorm and then this is going to go inside our app dot s CSS file this

is the file that got emptied out whenever we use the preset none so now it's time for us to fill it back up with some tailwind classes so we have the three tailwind classes but we're still

missing a couple more steps so let's keep scrolling down and the first thing we need to do is create a config file now the way tailwind works is of course it's got a bunch of defaults and they're

all fantastic but if you need to customize something that's where the tailwind config file comes into play so to create a default one we simply run this command in our terminal now notice

here that this has n px and not NPM so keep that in mind when you are running this command so we'll run that and that will add a tailwind config that j/s file right in our projects root

directory so let's go back to phpstorm if we scroll down here sure enough here it is tailwind dot config AS and it's empty and that's okay as we progress our project any customizations that we need

for tailwind will actually get added into this config file so it's good that we have a default one already in place the last thing we need to do is of course let web pack and mix know about

tailwind there's a section specifically on laravel mix so if we scroll down here a little bit there's this last section here for sass right and this is what we are using

right now so this is the one that we are interested in let's go ahead and copy this and we'll bring that into the web pack mix file and that file is right underneath the Tailwind config file and

right now all it's doing is compiling our javascript file located inside resources ab guess we've done some modifications to this file and then when it's done it's going to put the final

file inside public /j s then it's going to do the same thing for our sass file this file that we just modified right here this is where it's getting pulled in notice how there's a reference to it

right at the beginning and the same as the line up here it's going to put it inside the public slash CSS let's go ahead and paste this command right here and right away we could tell that this

line and this line are exactly the same so we can actually just replace that with that so that pretty much matches up now the last thing we need to do is go ahead and fix this tailwind config path

because right now it's just says path to your tailwind config clearly that is not the correct one as a matter of fact all we have to do is just delete that because it is in the current directory

remember they're sitting right next to each other right here so we just need to pull in that config file now just to make it pretty let's bump this into a new line and this into a new line and

then we'll go ahead and add the semicolon here just to keep it simple so one last step to our web pack that makes file and that is that we need to let web pack know about this tailwind notice how

it's still wiggled which means it's missing an import statement let's go back to Chrome one more time and write in the same block we do have this constant of tailwind that requires the

tailwind CSS let's go ahead and copy that command head back into phpstorm and we'll just add that right here at the top all right so we'll hit safe of

course we're still running The Watcher in the back so that should compile so let's go ahead and maybe do a test here somewhere so that we can see some sort of tail when class actually work on our

project so let's pull open the log in that blade that PHP file and this is riddled with classes from bootstrap but of course we're going to have to recreate a lot of this stuff in tailwind

as a matter of fact I've got a design mock that I want to use for us to implement so let's just simply change this into some sort of tailwind class how about BG red 400 that way we know

that there is some sort of tailwind class actually working all right let's head back to Chrome and then let's go ahead and refresh our login page and sure enough we see that tailwind is

working behind the scenes so for the next couple of lessons let's go ahead and get the login view looking pretty

Let’s shift our focus to the front-end and first of, Tailwindcss.

Buy the full course at https://www.udemy.com/laravel-api-development-vue-js-spa-from-scratch/

In this episode, we cover:

Proper setup of Tailwindcss in a Laravel project

Creating a Tailwind config file

Check that Tailwind is working on our project

About the course
Learn how to develop a robust API with Laravel and a Single-Page Application in Vue JS from Scratch

What you’ll learn
– RESTful API Development with Laravel
– Vue JS Single Page Application Methodology
– Front-End Design Using Tailwind CSS
– Implementing Search Functionality Using Laravel Scout
– Build a Complete SPA from Scratch