Ruby on Rails Tutorial | Installing TailwindCSS

all right so in this video i want to go over how to install and integrate tailwind css to be used with a ruby rails application if you're watching this video i'm going to assume that you already know what tailwind css is and you're just looking to figure out how to integrate this css framework to your rails application if you don't know what it is go into tailwindcss.com and read through it i'm not going to go over what it is but in my opinion this is the best css library that you can use right now and it's it's certainly my favorite now with that said uh let's get started and we'll we'll start by booting up or bootstrapping a brand new rails app so rail's new we'll call this tailwind css example and it will it's installing a lot of gems yeah there we go now it's installing webpacker which always takes uh longer than i would like um i certainly missed the days of the asset pipeline and it was definitely um faster in terms of at least booting up the rails app okay packages resolving packages linking dependencies building fresh packages i have no idea what any of these means but all right it's done all right now we're going to go into tailing css example and we are going to boot up our server and to see that our rails app has been bootstrapped properly so localhost 3000 and it says yay you're on rails excellent now we want to we want to install tailwind and test if it works so we need a basic home page to to test that it's working so what i'm going to do is i will create a new folder call home and i will create an index html erb that'll be our home page and since our folder is called home i'm gonna make a controller called home controller and now i'll go into the home controller and i'm going to define our controller and give it a row called index go into our index html file and open up a heading one tag and let's go let's print out hello world and uh let's go into our router and um define our home index right here now um but now just gonna reload our rails app and it should uh display a hello world right here our home page all right so technically um this looks a little ugly because tailwind i think the default font is um actually i don't know what it is but it's definitely not this this is quite um ugly well this is much more modern and elegant and i much prefer this so let's install tailwind so that we get this uh we get this beautiful font here by default now uh the way you do this um is if you go to tailwindcss.com go to documentation and go to installation um there is a section that says install tailwind via npm and it says npm install and i guess this stands for the dev environment i can't remember but we have to install these javascript packages in our rails app to install tailwind so tailwind css post css and auto prefixer all of them are the latest versions and instead of using npm i'm going to use yarn and what i'm going to do is i'm going to say yarn adds i'm going to copy and paste all of the the packages that we need i'm going to run that and it should and it will install the packages that we need and look it installed tailwind auto prefixer and post css now i'm going to boot up our rail server again to see if anything changed and nothing has changed because all we come unload and again nothing has changed and that's because all we did was we added the packages and we didn't configure it so that rails leverages tailwind it would be great if everything just worked but unfortunately that's not the case so let's let's uh let's go ahead and configure our tailwind configuration so that it works with our fresh new rails application so the main thing we have to do is we have to go into our post config post css.config.js and that's actually uh that'll be in your uh your root path in your rails application and you see that i typed in ls to print out all of the the folders and files available not in my rails app and there's the postcss.config.js file so i'm going to open that right there and the main the first thing we have to do is we have to uh we have to define our c a tailwind css right here basically require it because normally when you initialize a tailwind configuration file it'll get put in the root in the root path of your application but because tailwind is it's a css library but it's also kind of like a it's a javascript package in the context of context of our rails application i don't really want it living in the the root path right here i want it under app javascript where all of our webpack all of our javascript packages will be living and actually before we uh configure configure our post css file let's generate our tailwind our tailwind configuration file first so the way you do that is if you go down a little bit you'll see this part called create your configuration file and i mean it says mpx tail when css in it and all i'm going to do is i'm going to copy this and i'm going to paste this in my terminal right here i'm going to load up the correct note version first and once i do that you'll see that it created this this file called tailwindconfig.js and if i take a look at what that is it's basically configuration files for for tailwind and in our css configuration file what we want to do with this is we want to target that that file but as i said before because tailwind is basically a javascript application i don't really like the idea of liv like having this file living in our root path i want to move this into our uh app javascript folder path and tailwind it's it's a javascript package but it's a css library kind of like a framework so instead of putting it in just app javascript what i want to do is i'm going to make a custom folder called style sheets uh in my app javascript folder path kind of like um the the style sheets uh folder in in the traditional in the traditional asset pipeline and under app asset style sheets so i created this folder and now what i want to do is i want to move our tailwind config js into app javascript style sheets right here and you can see that the tailwind config js is gone and in our app javascript stylesheets folder we have this tailwind config.js file so perfect now now uh what i want to do now is i want to target or or specify in our post css config file that our tailwind configuration file is not in our roof folder but instead is in our app in our newly created folder called app javascript style sheet so let's do that real quick so the first thing we have to do is we have to require tailwind css so so i'm going to make a new variable here called tailwind css i'm going to say require tailwind css and with that uh in the first line in plugins i want to say hey 101 css let's target uh target app javascript style sheets uh how do you style style sheets style sheets uh tailwind config.js and i also want to require our auto prefixer and um uh our pro css stuff so here i'm gonna type in auto prefixer can't remember why i did this but this is something that that is needed for for tailwind to work so all right that's what we have to do our in our post css config file and um the next thing i want to do is i want to create uh a master sort of like where all of the the style sheets and all of the css kind of compiles into a little bit like in in the original or the older asset pipeline we have this file called this application css right and um that file uh is what kind of gathers all of the the css files together and uh compiles it into like this neatly packaged css file that minimi minified one and then then styles your your application but since tailwind is it's a javascript package and it's right now at least the configuration file is living under our um is living under our app javascript folder uh we're going to create one right there and the reason why we're doing that is because in order for tailwind to work we have to have that um that file application see that copycat of application css and we have to import uh these uh these for these uh libraries so import tailwind css based components and utilities so in our app javascript style sheets folder that we created previously i'm going to create a new file called application dot s s c s s um and now i'm gonna open that uh open that file right i don't know uh wait no i didn't i didn't create it and i did ls i have to i'm gonna create the file now with the touch and uh now it should sync but now it's right there i'm going to open it up and i will i will copy this and paste it in here now i'm going to open up my layouts application and if if you're familiar with the changes that was made with the webpacker gem with rails moving into using webpack to compile its its javascript files um this used to be called javascript something tag i don't i don't remember it's been it's been a long time but now it's called javascript hack tag and this application is is targeting at javascript packs application.js file right here and you can see here that what's happening is it's importing different javascript libraries that that we're using like turbo links uh active storage channels i believe it's for action cable fx i've actually never used that library before but but i believe that's what it what this line is for and here what we want to do is we want to basically require our newly created application dot s css file so we're gonna do is we're gonna say hey require require um style stylesheets application.scss and that what's gonna what's gonna happen is this line is going to uh it's going to require our import statements here and since this application.js file is being required in our layouts file right here on line 10 with the javascript pack tag uh tailwind will be successfully successfully loaded so i'm gonna restart my server uh mostly because i don't think webpack i could be wrong on this but i don't think webcap webpack automatically compiles without me restarting so all right now i'm going to reload and what should happen is i see yeah webpacker is compiling and i don't think it took effect i think that's because uh what we have to do is we have to start we have to start the webpacker server yeah we have to we have to start the server so what i'm going to do is i'm going to start that right here the wrong ruby version uh was was there so i'm gonna start the webpack dev server which will look for any uh errors and it looks like uh module build failed all right so post css plugin auto fixer requires post css8 so this error is actually something that's mentioned in the tailwind installation guide and if you read here it says error okay it says if you're integrating tailwind with the tool that relies on an older version of post css you may see an error like this error post here it says plug-in till in css requires pro css and it says in this case you should install the post css compatibility build instead so what we did here is we installed post css the latest version but what it looks like what we have to do is install the compatibility uh build instead and um it looks like what we have to do is uh npm uninstall tailwind post css auto prefixer and [Music] pro css compat all right what i want to do is now uh open i just want to take a look at what version is installed in our package json and it looks like it's 8210 so this has to be version 7. so i'm gonna take a peek at one of my older projects and it looks like now you know what let's let's just um let's just follow this these instructions so rather than uh doing trying to make this work what i'm gonna do is i'm gonna run these commands except it'll be uh yarn remove and now and next it'll be yarn and these um these packages all right so yarn add and i think this is a common thing with uh this post css eight error and that we have to use the post css 7 instead is a common error in um in within the ruby on rails environment because i've seen this error multiple times so if you're following this guide you may run into this as well so if you do continue following the guide and if if you didn't have any problems tailwind should have loaded up properly here so anyways i added the the post css compatibility library here and i will start up the webpack dev server again and i'm going to start up my rails server right here alright so as you can see you can't see it here because it's covered by this profiler thing i'm going to remove this real quick hold on i don't know why this this library comes with rails these days but i don't i don't particularly care about about um about this it's kind of annoying that it's it's covering up the space so i'm gonna remove that gem uh bundle uh the jump file again and start up the rail server all right now if i reload that annoying little block of useless information is now gone and we now have our hello world and this is a indication that tailwind css has been properly installed and uh let's let's test it out a little bit uh we can go and talk we can go into our uh our home page right here and we can give it some classes we can say hey text blue 500 text excel and let's let's reload and as you can see it has taken effect and we have correctly and successfully installed tailwind now moving forward when you start uh when you start uh you know building your application and you're you're adding css onto your application what you want to do is you want instead of putting it in app assets style sheets like you would in a traditional way instead what you want to do is you want to put it under app javascript style sheets right here and then require any additional css that you create in this application css file so for example what you want to do is let's say i want to create a css file called home so i want to say touch home javascript style sheets home.scss and i'm going to open that file and i'm going to say hey make all heading one tag make the font size something ridiculous 100 pixels right and if i reload nothing's going to happen however if i go into app javascript style sheets application css and import the home uh file here ah yeah i sparked it wrong right there if i reload um it will the webpacker will start compiling do its thing i i caught the air right here and it will uh it didn't do anything ah no no i think i think uh what's happening is i think i think these inline classes are are taking over so if i remove that if i reload i get this giant blob of text so that's how you install tailwind and and work with it uh so hopefully this video was helpful to to people who want to integrate and use tailwind within the context of ruby on rails if you found this video helpful please subscribe comment give me some ideas on some other videos to make and uh yeah thank you for watching

Channel: TypeFast

Views: 587

Keywords:

Id: 6UT0dRmGFOM

Length: 24min 1sec (1441 seconds)

Published: Tue Apr 20 2021