Skip to main content
Javascript and CSS Asset Pipeline:

How to install Tailwind CSS using Webpacker with Rails

22

Episode 227 · February 6, 2018

Learn how to use the awesome new Tailwind CSS framework using Webpacker in your Rails app

css Frontend


Transcripts

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 is a 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, it doesn't give you modals 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, a ton of little classes that you can use to tweak your UI to exactly how it should look. You can fine-tweak the padding and all that stuff by writing your CSS classes, not your actual CSS. This is really neat. It give 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. That's really cool, it gives you even responsive classes so you don't have to fiddle with the media queries or any of that, you've got this taken care of for you, and then you can extract these out into say, well this is how a card of this style should work, and you have the ability to then pull that out, and build your own components like you would see normally in bootstrap.

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 the blue ones should have a background blue and text as white and then when you hover 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, but with Tailwind, you can eyeball it and build a very similar version of it really quickly, so it's really awesome and if you want to see how to do that, Adam Wathan, one of the guys building Tailwind has several videos on it's YouTube channel where he rebuilds a coin base dashboard in Laravel IO, and those sites are incredibly awesome to watch, he builds out pretty much an exact copy of the coin base 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 webpacker. So let's create a new application to use Tailwind CSS. Now I'm going to create a new application, and you can apply this to an existing one if you add the webpacker gem and install it, but because we're going to create a new application, let's call it

rails new tailwindy --webpack

That's going to make sure that webpacker gets installed, and you will see that in this setup because it's then going to run yarn at the end after it's created your application and then install a couple things. That installs webpacker, and everything for us, if you have an existing application go read the webpacker readme, install webpacker 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. Let's go into our application, and we need to then

cd tailwindy
yarn add tailwindcss

This is going to add the dependency and install it from npm and we're going to use the node modules file that it ships with the .bin tailwind's executable we're going to initialize, and actually before we do this let's make a directory called app/javascript which is where the webpacker stuff goes. It creates a CSS folder in there and then we will create

./node_modules/.bin/tailwind init
mkdir app/javascript/css
./node_modules/.bin/tailwind init app/javascript/css/tailwind.js

That's going to basically set up our tailwind install and configuration into that folder. That is where our CSS is going to live for tailwind. Before we get along to far, I want to point out that that file that we copied over from tailwind's 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 000, so all of these colors, the rounded screen sizes fonts, the rounding, and text sizes and all of 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. Our application.js file here in packs is going to be where we're going to be importing this CSS, but first we need to build our own stylesheet. 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 going to grab that. This is basically going to give us a little template of how we can go start writing our styles. What we're going to do is create that full file and set it as app/javascript/css/application.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 js 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.js file, and we want to import this mainly the stylesheet into our application.html.erb so we want our JavaScript pack tag, and more importantly the stylesheet pack tag here so that we can get access to the compiled style sheet, so we will have that and we will import this which we'll go over here, and then once it hits the @tailwind, we need to have a trigger the tailwind.js basically. What we have to do is go and modify our post CSS yaml file, so there's a configuration file with that webpacker comes with, you probably didn't know about called .postcssrc.yaml, and this file is going to be where we define tailwind CSS and this file is going to be where we define Tailwind CSS and we need to point it to that tailwindcss: './app/javascript/css/tailwind.js' file that we copied over from tailwind's node module. Basically this is going to set it up so the @tailwind module can be imported in the CSS and we can access all of the tailwind stuff, and then we can go run

rails g scaffold User name

We can set this up, and then have some views to look at. I'm going to run this, and then set up the routes file so that we have root to: "users#index", and one thing to remember to remove is when we generate a scaffold, you want to rm app/assets/stylesheets/scaffolds/scss because that adds these weird colors to the links and some default styles that we don't want because we're going to be using Tailwind for everything. Let's take a look at removing that, and if everything is set up correctly, we should be able to start a rails server, and one thing you'll notice right away is that when you go to the form, 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, or Chrome or Firefox all look the same by default, and that's what your normalize is going to do so that all of your UIs look the same once you implement these styles on top. We can go and tweak our button here because 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 light, we can do our padding which 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:bg-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 application CSS now. We can have our button class, our button purple and our button purple hover class. These will all receive an @apply onto 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 @apply 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 to denote that it's a class and not like an ID or something else.

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's still caught the purple colors and the hover state but it doesn't have the full rounded corners and everything so we know that it's created all those classes when it compiled the CSS.

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

Transcript written by Miguel

Loading...

Subscribe to the newsletter

Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

More of a social being? We're also on Twitter and YouTube.