How to Install TailwindCSS 1.0 with Rails 6

[Music] we're talking about implementing tailwind CSS in rail six and we're gonna be using specifically to and CSS version 1.0 this is going to be coming out just in a very short while and so around six and so I wanted to give you a walkthrough of how you set this up in the latest version of web Packer which recently got released this version 4 and made some great improvements so that it's easier to use javascript libraries and set them up because we can just follow their webpack instructions pretty closely now without having to make weird modifications to handle like the yamo formats that we used to have so this is gonna be pretty awesome but let's take a look first at our rails application and how web Packer is set up so you can have a good understanding of this before we dive in so if we take a look at our code we're gonna see that app assets JavaScript is no longer there it doesn't get generated in a new rails app anymore and we instead get app JavaScript so inside of there we'll have a packs folder and these are going to be the separate JavaScript packs that will be compiled for your applications so I have application j/s open right here and this stuff at the top is what is generated by default we have the same JavaScript includes as you used to have in the asset pipeline we have rails UGS turbolinks active storage and channels is actually action cable so any of those WebSocket channels will be defined there and this is actually requiring the channels folder and then the index yes and that takes care of importing all of your channels for you so that's pretty cool and it's set up for you we also have this controllers line that was I added additionally for stimulus if you run rails web Packer install stimulus so if you ran this in your command line you're gonna get that set up in there for you and that will generate this folder and have index which allowed any controller files in this folder so that's pretty cool and we also did a quick example in the last episode on how to set up flat picker and include its CSS from the JavaScript node module in your rails app so that was pretty cool take a look at that episode if you want to see how all of that works and I go more in depth on the new web Packer set up as well so namely one of the most important things especially for tailwind is that our post CSS config is no longer a gamble file it's actually a post CSS config gif file same thing with our babel we can now write just javascript in there as the node and JavaScript developers are used to doing so when you see instructions I usually assume that this file is JavaScript file not a Yambol file and this change is going to make it so much easier for us to go add functionality in because we can follow the directions from any node modules instructions so let's go and dive into adding tail in CSS to our rails app so the instructions for tailwind CSS for version 1.0 are pretty straightforward we've got three things we need to do we need to install tail in CSS we need to setup the stylesheet and then we need to go ahead and configure a post CSS through web pack to actually process our CSS files with tail link so that's it and let's dive in let's go and run yarn add tailwind CSS in our terminal if you want to install tailwind CSS 1.0 currently there's only beta 4 out right now so if you did this you'll get zero point seven point four which wouldn't be the latest version so because it is unreleased yet we can say to in CSS at next to grab that latest version and I will show you that right here if we go to tailwind CSS on NPM jeff's this under versions is going to show how to grab the latest version by default it will install the latest version and then if you use that at next tag it will install beta Oh point four and so when version one officially comes out that will become the latest version and you won't need to specify that at next anymore so keep that in mind when you're watching this in the future tailmon CSS 1.0 will be out or 1.1 and so on so we're gonna run this and just make sure that we get the right version printed out here after it finishes installing and we do and that's great so now we know that that setup correctly and we can go on to the next step which is creating a CSS style sheet that uses tailwind now by default it uses that at tailwind directive but there's also a note down here that says if you're using post CSS import use our imports instead of tailwind directive to avoid issues when importing any of your own additional files now I haven't used tailwind CSS 1.0 very much personally so we're gonna grab this version of the style sheet because if we open up our yarn lock you'll see that one of the dependencies of web Packer 4.0 is actually CSS import so we're going to assume that that actually applies to us and use this version of the style sheet but you might just be fine using the other one as well but I assume this note here is kind of important so we're gonna use that version instead so let's go ahead and make a directory inside of app JavaScript and we'll call it style sheets and we'll open up a file in there called app JavaScript style sheets application dot s CSS and paste in that tailwind settings for that or the default styles so then this file on its own is not going to do anything at all we need to import that from our application J s so I'm gonna drop this in right here and we're just gonna require style sheets slash application s CSS and that's going to make sure it imports our style sheet from the style sheets folder that we just created and it will give us access to that and our browser now one of the things that we did in a previous episode when we set up flat picker was we actually modified our layout so our layout application dot HTML er B has a new line in it so by default it looks like this and what we did was we copied a stylesheet link tag and changed it to stylesheet pack tag so the link tag is going to load the asset pipeline style sheets this style sheet pack tag is going to load the style sheets from web hackers so that's going to be really important to make sure that you have otherwise you're not going to see any of your tailwind CSS even if it does compile correctly so that is important to make sure that you have in your head tag in your layout and our very last step now that we have our style sheet is we want to go to the processor CSS with tailwind section and look for the web pack instructions and so right here we can find that and this is going to be so much easier now that we have a post CSS config as a gif file we can literally just grab these two lines that it wants you to add and drop them in and so we can do that by grabbing this file and we'll just drop them in right here at the top and save the file and one of the best ways to test this out is just to run bin web pack yourself this will trigger web pack to Co compile all of your CSS in JavaScript and you should see that this does not fail and if that succeeds then you should be good to go and you'll be able to see here the stuff that it outputs and all of that so you see this application jus the map in the manifest JSON and so on you'll also see these other things like okay it's definitely loading these style sheets application dot CSS and it has built that and so on so that's good and now if we refresh in our browser we should see that we see in the new fonts from tailwind CSS which is good and if we go to grab one of their examples like let's grab a navbar and paste that into our layout just to make sure that it were we can go into later HTML in our being and above our yield will paste in that navbar and tap it over and if we refresh our page now we should see that we get our tail in CSS mat bar and it matches in the nav bar that we see in their example so we definitely have tailwind CSS now working and it's all being processed through web pack which is awesome and gives us a very easy way to go and style and do custom designs that can be a bit hard to do with bootstrap so in the future we're going to talk about implementing bootstrap through web Packer but this is it for this episode I hope you enjoyed it and we'll talk to you in the next one peace [Music]

Channel: GoRails

Views: 5,564

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, rails 6, tailwindcss rails, tailwind css rails, rails webpacker, webpack rails, tailwind css webpack

Id: L2nyKwrEY8w

Length: 9min 38sec (578 seconds)

Published: Tue Apr 16 2019