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
yarn add tailwindcss
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
Join 20,000+ developers who get early access to new screencasts, articles, guides, updates, and more.