How to use Tailwind CSS with Rails

[Music] what's up guys this episode we're diving into using tailwind CSS in rails but first if you aren't familiar with this I want to introduce it to you briefly this easy framework for building your own front ends you can use it to build anything you could possibly imagine you don't have to use any of the components like bootstrap gives you because this framework gives you utilities only it doesn't give you buttons it doesn't give you cards it doesn't give you alerts doesn't give you modal's or any of those designs they are completely up to you to build out which is kind of Awesome so this gives you a bunch of little classes a ton of little classes that you can use to tweak your UI to exactly how it should look you can find tweak the padding and all that stuff by writing your CSS classes not your actual CSS so this is really neat it gives you all these tools to give you the rough implementation and then they also give you responsive CSS classes for example this one says well it's horizontal normally but if we shrink it down we want the items in there to be vertical so that's really cool it gives you even responsive classes so you don't have to fiddle with media queries or any of that you've got this taken care of for you and then you can extract these out and to say well this is how a card of this style should work and you have the ability to bed and go pull that out and build your own components like you would see normally in bootstrap so this one for example shows a button but a button doesn't exist here in tailwind and so to build a button we have to set a background and a hover state and text white and font bold and padding and rounded corners and so we can extract that out by saying well we want to make reusable buttons all our buttons should have font bold padding and rounded corners and then a blue ones should have a background of blue and text as white and then when you over it it should be darker blue and so you can use this to prototype your UI and then extract it out to build your own UI kit which is really awesome when you're building an application or anything like that that needs a really custom UI especially when you take something from your designers PSD and you're trying to build it out that can be very time consuming to do but with tailwind you can eyeball it and build a very similar version of it very quickly so it's really awesome and if you want to see how to do that Adam way --then one of the guys building tail-end has several videos on its youtube channel where he rebuilds a coinbase dashboard and laravel IO and those sites are incredibly awesome to watch he built out pretty much an exact copy of the coinbase dashboard in two hours and it's responsive and he even gets the little nuances down right of the drop-down avatar shows up in one state but the name shows up in the other and there's opacity on this caret and all these other things it's awesome to watch so I want to show you how to use this in rails and we're going to use that using wet Packers so let's create a new application to use tailwind CSS now I'm going to create a new application you can apply this to an existing one if you add the web Packer gem and install it but because we're going to create a new application let's call it tailwind II we're gonna say web pack - - web pack and that's going to make sure that web Packer gets installed and you will see that in this setup because it's going to then run yarn at the end after it's created your application and then install a couple things so that installs web Packer and everything for us if you have an existing application go read the web Packer readme install web Packer in your application and then that is it you are up-to-date to where we are and you can go follow the rest of this from there so let's go into our application and we mean to men yarn add tailwind CSS this is going to add the dependency and install it from and we're going to use the node modules file that it ships with the dot bin tailwinds executable we're going to initialize and actually before we do this let's make a directory called app JavaScript which is where the web Packer stuff goes it's create a CSS folder in there and then we will create node modules Ben tailwind and MIT and we're gonna do an app JavaScript CSS tailwind dot J s and that's going to basically set up our tailwind install and configuration into that folder so that is where our CSS is going to live for tailwind now before we get along too far I want to point out that that file that we copied over from tailwind node module gets installed to our rails app and you have free rein to go and modify this this is something that you should be aware of because you can go dive into here and change the colors if you would like black to actually be black you can go ahead and modify that to be zero zero zero so all of these colors the rounded screen sizes fonts the rounding and text sizes and all that stuff are configurable in here it is really awesome what you have available so take a look at all of that this is kind of what's going to define what CSS classes will be generated and available to you when you're building out your Styles so our application J's file here in packs is where we're going to be importing this CSS but first we need to build our own stylesheet so what we're going to do is go back to the Tailwind CSS guide now they have a tailwind CSS example stylesheet in the installation section so we're gonna grab that this is basically going to give us a little template of how we can go start writing our Styles so what we're gonna do is create that full file and set it as a pajama script CSS application dot CSS and so we're going to have that here and we'll paste that in and that's going to basically say tailwind give us all of our default stuff and all of our utilities and then we can go and build out our own components like you saw with the button example now our JavaScript application j/s is actually going to import a CSS file which would be a little tricky or a little weird to think about but because tailwind is more like a JavaScript CSS generator in a sense it's generating all this CSS for us so we can go and say we want to import CSS application CSS in our application J's file and we want to import this mainly the stylesheet into our application HTML er B so we want our JavaScript pack tag and more importantly the stylesheet pack tag here so that we can get access to the compiled stylesheet so we will have that it will import this which we'll go over here and then once it hits the at tailwind we need to have it trigger the tailwind j/s basically so what we have to do is go and modify our post CSS yellow file so there's a configuration file with that wet Packer comes with you probably didn't know about called dot post CSS SRC yeah Mille and this file is going to be where we define tailwind CSS and we need to point it to that app JavaScript CSS tailwind dot J's file that we copied over from tailwind node module so basically this is going to set it up so the at tailwind module can be imported in the CSS and we can access all of the tailwind stuff and then we can go run let's generate a scaffold for user with name so that we can set this up and then have some views to look at so I'm going to run this and then set up the routes files so that we have route to the users index and one thing to remember to remove is when are you generate a scaffold you want to remove app assets stylesheets scaffold CSS because that adds these weird colors to the links and some default styles that we don't want because we're gonna be using tailwind for everything so let's take a look at removing that and if everything is set up correctly we should be able to start a rail server and one thing you'll notice right away is that when you go to the forum there is a very very blank slate here and that's because tailwind normalizes the CSS so every browser by default has basic styles implemented they choose maybe serif fonts or some do sans-serif or whatever and the normalize actually make sure that all of those are equal at the beginning so your Internet Explorer Chrome or Firefox all look exactly the same by default and that's what your normalized is gonna do so that all of your you eyes look the same once you implement these styles on top so we can go and tweak our button here cuz that's a great easy example for us to do we can just do the same thing as we saw in the example before or we can do like background indigo or we'll have a purple one we'll have text is white we can do our padding with is like px 4 and py 2 rounded corners we can do if we want that hover state we can do the same thing of hover background indigo dark and we should be able to save that and see that we have this purple button now which is awesome and then we can actually go and extract this out to our classes inside of our applications ESS now so we can have our button class our button purple and our button purple hover class these will all receive an at apply unto them and so that's going to add apply the other classes to it so we'll write that in and then we'll just grab the classes for each one of these so button purple is really just these two colors then our hover background indigo dark is just going to be moved to here we don't need the hover in this situation because our CSS takes care of it and then our ply really just handles this so we have those and then for each of these because we're in a CSS file now we need to make sure that we do a period in front you denote that it's a class and not like an ID or something else so if we do that then we can go back here and add our button and button purple onto it and that will work after it gets finished compiling and recompiles that file we should see that it's exactly the same but this time we can fiddle with it and we could say well what if we accidentally left off the button class here and you would see that it still caught the purple colors and hover state but it doesn't have the full rounded corners and everything so we know that it's created all of those classes when it compiled these ESS so that's it for this episode I really really like tailwind CSS I think that it really speeds up my ability to prototype a UI and then lock it down later on when I extract those components out into something that's reusable I think it's really really handy to have and so that is it for this episode if you enjoyed it let me know in the comments below and I will talk to you guys in the next episode peace [Music]

Channel: GoRails

Views: 7,536

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, tailwind, tailwindcss, tailwind framework, utility css

Id: IKjttXqtVV0

Length: 12min 32sec (752 seconds)

Published: Tue Feb 06 2018