How to Install Tailwind CSS 2.0 using Ruby on Rails

[Music] so if you're an avid tailwind css user like i am you might have heard that the 2.0 version has officially launched and with it comes basically a whole new website with some updated documentation a lot of new features and whatnot i'm not really doing this video to kind of go over what tailwind 2 brings us but more so how to use it with ruby on rails or install it i should say i've covered this in the past and i figured i'd do an updated version so this is going to reminisce the original versions you might check those out if you need like a really detailed guide but this one will be kind of just a quick guide update some quirks that are part of uh installing it on ruby on rails that i'll walk you through which is a common quirk you'll have to find and kind of circumvent but like i said i published this before there's the original blog post to install it on ruby on rails the first version of tailwind and then version 1.2 which was kind of a major release at the time which is already out of date so the guys at the tailwind team have just been cranking out updates um seems like every freaking day so it's kind of annoying but also cool but if you check the documentation it got a very big makeover it looks real nice big bold and loud there's a lot of new features of tailwind since those past videos i've recorded including like gradient support you can like at apply anything now so when you write custom css you can do like large screens and small screens in there without using any media queries which i think is a big game changer for me particularly there's a built-in dark mode configuration focus ring so there's actually a library now for form inputs which i might update my other stuff like my kickoff template to use so we don't have to really reinvent the wheel there but it comes with some great defaults that you can extend and move really quickly with which is the reason i like the framework personally so what i want to do in this guide is just kick things off and get it installed they have some like integration guides they don't have rails on here i guess it's not the latest and trendy things so they don't really support it but that's that's fine that's what i'm here for right but you can install it using npm um rails typically uses the yarn library as opposed to that either works i guess but i would i would stick to yarn for this case since it's going to be what is common in a rails app um aside from that we can kick things off so what i want to do is just create a vanilla rails app in my my code directory so i'm going to say rails new it's going to just be a default app so say tail 1 2 and maybe i'll do it underscore something like that and just do the default app nothing nothing with it by default um actually it is using something by default so let me um fix that real quick i have a dot rails rc file so let me grab that okay so rails new tailwind underscore two i'll run that it's gonna be a vanilla app nothing under the hood just basic what comes with rails so we'll install that and carry on with the tailwind installation so with rails installed we've got our tailwind 2 app and it's just on the latest and greatest i'll open it in vs code so let's open this everything's green right now because i haven't initialized well it's initialized but i'll just do it get add blah just say git commit init okay i just don't want the editor to be christmas lights but under the hood we need to have the concept of adding tail into our stack luckily it comes baked with webpack and post css support configuring that on your own can be a nightmare so you know the rails gods and the people that contribute to the framework has made it really easy uh thanks to the webpacker gym and whatnot but that's decide the point let's install tailwind now so there's a quirk with this step where right now rails is running post css 7 compatibility the newest version of taiwan is going to go for eight so to compensate there's an actually different build we'll actually need to leverage when we install this and eventually we'll update this you'll want to update this to the latest and greatest which is just at latest should be the good flag so what i'm going to do is go to the link here if you see it in the url i'll close these off and grab this line here since i'm using yarn i won't need to do the npm install we're going to do yarn add instead so i'm going to copy this line go into my project where am i am i there i am so we'll just say yarn add and then paste that line and it's gonna have this npm name stamp and that's okay it's just more or less getting the compatibility version that we need so it's important that you grab this so it works with rails otherwise you'll get errors when you try to compile your webpack code anything javascript or styles that you run into now that done we need to also add we can see that change here we've got tailwind css now it's going to add this it also depends on auto prefixer and then of course post css to work so what i want to do next is get our configuration for tailwind intact so we'll go back to the guide i'll hit the back button and we just need to add our post css config file basically get an actual tail and config file added so what i'll just do is use the built-in npx thing we can use from the module and just enter this it creates this file at your root of your app now you can keep it there i prefer it to live on its own kind of folder structure so in my typical apps i'll go into app javascript and create a stylesheets folder you can move yours wherever you want but this needs to be referenced from your post css configuration and i'll show you why in a second because i'm going to move this file all the way up to that one so we've got the actual relative scope of that files app javascript style sheets and then tailwind config.css here's what the base config looks like it's going to come with the theme by default and what you can do is either extend it or add stuff to it and then there's a built-in purge mode so what i typically do is pass in my own module or i guess relative file names to purge and what that does is eliminate classes and css we don't use in the end and it's just going to save us a lot of bandwidth and size of our style sheets in the very end so what i'll do is pass in some values there and continue on so in this case for me it's going to be it might depend on your app but you might have like a react app you might have view in your app but for rails typically you'd have this structure to start with and we'll just comma separate these strings so for me i'm going to put app helpers sometimes there's code you use to create html in helpers in a rails app 8 is not right and then app javascript pretty much any js file and then i use view a lot so i'm going to add that as well up to you what you want to do and that's going to usually with rails it's going to live in the javascript directory and you can just do a namespace and then start up you that kind of just goes through each of those files and looks for stuff that it should eliminate or omit so that's that setup what you can do additionally is pass in any plug-ins you want to add here one that's brand new is the um forms plug-in as well as like a color plug-in if you want to extend your color styles at all but let's first get this all set up so we can get things rolling so what i want to do is grab these sets of imports these are kind of more preferred for the webpacker it even mentions that here so we'll add that to our stack next i'm going to create an application that's css file you could be css or scss doesn't really matter webpack takes care of it for us and then that file is going to end up piping itself back into this file we'll import it here so we'll say style sheets application and this is going to omit or emit styles via webpack so everything's going to transpile down actually enter our app now there's one quirk with that that we still need to render the style sheet pack tag with the same name and the reason for that is the styles get injected in that style sheet from the javascript pack tag itself so we're importing it into the the global application.js pack as you can see here so the style sheets themselves are coming in as this stuff so it's all based on javascript but it ends up being you know separated in a way that makes sense for the browser okay so with that done i think we're pretty close to getting everything set up it's kind of the same pattern here if you want to name it tailwind you totally could but you need to kind of update stuff accordingly any custom css if you wanted to add some um you're going to want to import it in between these two i believe as a as it says here in the docs this just allows you to extend stuff but not come conflict too hard with any of the other utilities or base components so you might add your styles here cool so i will try to boot up the app and see what happens with this if we get so i'll just run rails server and webpack compiles automatically when you boot up rails server thanks to the webpacker gem you can also run hot module reloading using a specific command in another console so in this case it would be ben webpack dev server i think this will get an update soon to be webpack serve but i'm not 100 so we'll see that kind of do its translation you see the size of everything coming through and we can check the browser out at 3 000 and we'll see that but we kind of want to you know see it for real so let's go in to our routes i'll just make a generic actually make a generics controller so the controller is a static controller we'll have a home action on it it's just going to be a static page where we render our um home i'll just leave the get request and we can just say root 2. i believe that's right uh so then we can restart the server because that's probably gonna bork and if any luck comes through let's see we're getting our page but we're not getting our um styles so let's double check everything oh you know what i'm missing okay the post css config has no idea where our tail and configuration is so we need to actually supply it i'm not even requiring tailwind yet so that's a huge terrible thing so tailwind so we can say tail and css and just do it in line like this and what's neat is you can pass just the config in this instance so i'm going to say app javascript where we had style sheets and then tailwind config.js and we need a comma there we go and let's double check our work here oops if we get any errors there we go see how big it is now that's all of tailwind so you definitely need purge css holy but you notice all the styles change by default here so we've got that in our arsenal now so basically you're ready to roll now if we go to that static in our home page we can use some tail ones so fonts all right and we can refresh we've got this let's do tech center on everything and then like margin top 32 and maybe i'll do lorem and let's see what that looks like nice um this is not a style tutorial but i'm just trying to get you some realization that hey it works that's neat so we could say font light maybe give it some offset and there we have it so tailwind 2 installed in a rails app we did have to use that post css um i guess compatibility thing so at any point if your app's running that compatibility state you might need to update it to the latest which is pretty easy you just do a yarn install the tail and css latest and it should update that in your package.json file so that's the extent of this guide i wanted to just kind of do a refresher since tailwind 2 is released i hope it's useful i'm excited to really kind of give talent a real real run for its money it's got a lot of features now that are very useful so the gradients and stuff are really neat to see like all this stuff's tailwind so awesome stuff ahead i'll probably do more some some more of tailwind specific videos if you're interested in that i do have other guides that are using tailwind pre taiwan 2 but i'll do some updated stuff soon for sure all right take care peace

Channel: Web-Crunch

Views: 4,328

Keywords: web-crunch, web crunch, web development tutorial, coding tutorials, learn to code, how to code, tailwind css, ruby on rails, install tailwind css, ruby on rails tailwind css, how to install tailwind css ruby on rails, how to install tailwind css, how to install tailwind css via npm, How to Install Tailwind CSS 2.0 using Ruby on Rails, tailwind css 2.0, tailwind css 2.0 tutorial, tailwind css 2020, ruby on rails tailwind css 2

Id: Q1aTo2I6Dxc

Length: 15min 52sec (952 seconds)

Published: Thu Dec 10 2020