Skip to main content
21 Javascript and CSS Asset Pipeline:

How to install Tailwind CSS using Webpacker with Rails

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

Discussion


Fallback

Nice addition to GoRails episode list. Would love to see more TailwindCSS with Rails videos. Also thanks for plugging your laptop power in...I was starting to panic :D

Fallback

Hahaha I noticed that too while editing. Forgot I was recording without power. :P


Fallback

Hi Chris, thanks for the interesting tutorial. I had not heard about tailwind before. Even though I like the end result I ask myself if a sass mixin library that offers the same micro classes wouldn’t also do the trick while staying close to the rails intended way of writing css. What do you think? Could one implement something like tailwind-sass and get the same benefits (plus smaller file size by default)?


Fallback
Stephen Miles MacLennan

Awesome video, tailwind looks amazing! Just a heads up, the link to the Youtube video for the building coinbase tutorial seems to be outdated (Youtube has moved it out of the 'live' category I think). Heres the link for the non-live version https://www.youtube.com/wat...

Fallback
Thanks Stephen! Good catch on the YouTube URL.

Fallback

.postcssrc file explained in this video causes a warning regarding the @apply rule. Warning disappears if tailwind is loaded before postcss-next

https://github.com/tailwind...

Fallback
Thanks for this. It helps me quite a bit!


Fallback
Awesome episode, I did everything step by step and it works fine but I'm experimenting some delay or blink on page reload with images. I think its related to how I'm using css assets with webpacker.

Some one with the same errors?

Fallback

Anyone finding application.css is not found in the webpacker manifest.json?

Module not found: Error: Can't resolve '../css/application.css'
Fallback
Yes the app don't work... screenshot :-( . You have solved? I have solved i lost to charge app/javascript/css/application.css

Fallback
I deleted a separate thread I started in the JS section as I didn't realize this one existed. 

In a nutshell, I love Tailwind and would like to use it for a forthcoming project but can't get it to deploy via Heroku. Everything appears to install correctly until compile. At that point, the logs indicate an error when loading tailwind module.

Has anyone successfully deployed to Heroku or AWS Codestar?

Fallback
As far as Heroku goes, I had to add the nodejs buildpack to my Rails app so it would properly compile Webpacker with Ruby. You basically end up with both the Ruby and Node buildpacks and that gives all the Ruby and Node/Yarn versions required to get things going.

Fallback
Thanks Chris. 

I've got the buildpacks installed and executing in order (Node, then Ruby). Deployment is normal until compile where it's throwing the following error in log:

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css 
remote: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

I'm assuming I need a webpack.config.js in root (which I've added):

var tailwindcss = require('tailwindcss'); 
module.exports = { 
   plugins: [
       tailwindcss('./app/javascript/src/tailwind.js'), 
       require('autoprefixer') 
   ]
 }

I'm getting there.... :-)

Fallback

SUCCESS!

A single sentence found on the github repo for webpacker rails gem solved my issue. 

"Remember to set NODE_ENV environment variable to production during deployment or when running this rake task."

Alas, this was all I needed to run via CLI:

NODE_ENV=production ./bin/webpack

Fallback
Off topic, but Chris, how did you manage to get hot-reloading work with a simple Rails s command, without launching WP as a separate process?
Fallback
You do have to have the webpack-dev-server running separately. I usually use foreman to manage that. Without it, it won't hot reload in development, but you can have Rails automatically compile the files in-process like it does with the asset pipeline if you don't run the separate dev server.
Fallback
watch the video c l o s e l y 

Fallback
Thanks for the awesome video Chris! I took the time to encapsulate some of this behavior into a gem to easily integrate with Rails - https://github.com/IcaliaLabs/tailwindcss-rails - enjoy!
Fallback
Awesome, Abraham! Thanks for sharing!

Login or create an account to join the conversation.