Adding Tailwind UI to Ruby on Rails

what's up welcome back everyone uh in this episode we're gonna talk about adding tailwind ui to a rails application um so as you know i don't usually make things look good so uh if you've been watching my episodes probably the last like 30 to 40 episodes have looked like this just bare bones html whatever the browser gives me in terms of css that's what i'm going to use and that's because i am not a fan of css i don't like tinkering around with it it's kind of a huge pain in the butt um and it it is it is quite bothersome to me and i i have like burned thousands of hours on trying to make stuff look good and i have sort of just decided that there are people who are good at this and i'm just going to depend on them but today i am excited because i wanted to try out tailwind ui it sounds like an easy way to just use these pre-built components for everything and so admittedly even though i've been writing code on the web since like 2005 so 16 years i have never really properly learned css uh and so i am i yeah i'm embarrassed to say that i like don't know barely i barely know anything about css but i'm excited to see this big beautiful ui components crafted with tailwind css and i know everyone's been raging about this so i just gotta try it and so what's interesting is they give you like a bunch of tools to try everything out you can find the perfect component copy the snippet make it yours it sounds like you just copy it and it looks beautiful this teresa web person is going to be the designer right so uh yeah like having a dashboard here with form fours and companies and whatever and making it look cool sounds like a good idea so let's just take a look at the pricing so they've got the application ui that's kind of like the dashboard stuff i assume then there's the marketing ui i think on the main page here it shows you yeah so the marketing components these are the different sections they give you and then the uh the application ui is like the sheets and the tables and the layouts and displaying data and stuff like that so i kind of want both um and i think i'm just going to jump in and buy both of them so we're going to go through the whole flow this is i'm also recording this cold i've never used it before so like uh yeah i've touched a couple applications that have already had tailwind installed but i've never actually like set it up from scratch so we're going to go through the whole process here from scratch and see how it goes so all right diving in okay we got to put our email and password oh gosh no that's not a real card don't steal my credit card all right they're contacting my bank okay so we purchased this thing we're creating an account okay so i created my account and there's a whole bunch of sections and components here so this is what i wanted to dive in and like play around with and test out so let's see if we can make this page not look disgusting and gross like it does right now so this is just a table of data and also like on the homepage this is kind of what i've got going on in terms of like the two different main views the form fours view and then we've got the companies view and then for each company we have like this this uh stock chart view where we can see the prices for a given company so this is kind of like this is what i want to style it should be pretty basic and straightforward so let's take a look and see which component might make the most sense so if we look at tables um sure simple stripe table simple simple with avatar think simple sure all right so i'm just going to like copy the html and then come back over to my table here and just paste the html and then come back to my view and refresh the page oh yeah because i didn't actually install anything so how do i install this okay so getting set up so npm install t01 css at latest um there's probably like a rails tailwind thing so rails tail wind let's see i think you just install tailwind css like normally and then once tailwind is installed then you can just uh use the you like the pre-built ui components that they have that they're giving you here so tailwind rails um yeah so bundle add tailwind rails sure and then we come over here and we say bundle add tailwind rails okay and then i'm going to say install tailwind css i think this is probably like creating javascript files for me yeah yarn ad so it's adding it and it's adding like post css which i think is helpful when run on an app using the asset pipeline the last step just adds a purger compressor to production.rb this ensures that that is called okay um it also adds a stylesheet link tag to your app views html okay cool so that's like sort of installing everything for me i think maybe i think i might have to restart the server so restart rails and then if i come back over here like i'm just hoping that this looks way better uh i don't know if it will let's see so refresh the page and maybe is there anything else i have to do just two steps you run this bundle thing and then you run this thing and nope um okay what else do i gotta do i think because i'm using assets i might need to start up the webpacker or something let's see what's going on here this usually happens when your environment has changed since running npm install run this to download the bindings for your current environment okay and yeah i'm just going to say rails i'm going to restart the real server and then i'm going to split this and then try to set up the startup webpacker i don't know if i actually need webpacker or not but let's see refresh nada okay so web packer oops wait yeah do i need that rails webpacker install um and then dev wait web packer webpack dev server no oh bin webpack dev server project is running web book output okay file not import okay so wasn't able to import this it wasn't able to import or find this thing tailwind css base so do i need to like yarn add that yarn add to one css base so i'm kind of i'm kind of flying by the seat of my pants a little bit because the documentation here is about just installing it directly and i'm trying to use this gem which is supposed to help a little bit but i don't know if it's actually working uh does anybody how many stars this thing have 261 all right repository not found hmm import tail and base yeah it's not able to find that so let's google around sas errors fail to import this thing okay for some reason i needed to add the css extension to each of these okay uh wait what okay let's let's say rails webpacker install i don't know for sure if i actually installed webpacker i'm pretty sure it's installed already because we had that webpacker dev server but just to make 100 certain okay identical do i want to change that no i want to open post css though okay so post css config this is where i think the magic happens for tailwind is in post css because it is a post css plugin i believe stuff is happening things are happening okay fail to compile here we go this is the same error i was having earlier um all right so in application let me let me go over here and see if i can add css to the ends of those and see if that fixes it because i didn't i didn't realize this was a file that was already created so let's go there and let's try this yeah so dot css yep i think that might have been it no okay cannot find module tail and css now from the post css loader okay npm yarn add t01 css maybe the engine node is incompatible with this module version greater than 12 point okay so then node ends um node and versions node and local that really fancy new version and then try adding it again uh npm install yarn try it again oh come on that looks promising okay so i had to use node 14 7 that was just like a version that i had on my machine that was greater than 12. i usually use 10 16 10 17 so but i have a couple newer versions installed with note end so i jumped to 4 7 14 7 which had yarn which now installed all the stuff and let's see if i can restart the webpack dev server and if it will not be mad at me anymore let's see it's going to try to recompile all the things what packer is compiling gosh it's it's it's wild how many like hoops you have to dance through to get webpacker working with rails okay what is it saying now no such file or directory to tailwind config style sheets tail and config so i think i might need to like run that tailwind install thing again because i kind of i think i might have blown it away um let's see just run this again when i when i reinstalled webpacker i think i might have wiped out some of the stuff that came with this okay it exists and there's a conflict do i want to overwrite applications scss no because i added the dot css and that changed everything okay so now it says created tailwind config file tailwind config.js now if i refresh uh oh okay so it's not crashing anymore but it is totally crashing fail to compile what is the deal okay let's restart the dev server for webpacker and compiled successfully but there's no css showing up okay what else do i need to do here um so let's go over to our application html erb and i think we might need style sheet link tag tailwind maybe let's see hey look at that beautiful table ah so so pretty i love it okay cool so that's how you install tailwind css with rails you fight with webpacker a lot uh and then you end up with something that works cool um yeah webpacker inside of rails is is kind of a mess i really hope that gets addressed in some future version so that you can just yarn add something it consistently works i wish saying rails server would also start up the webpack dev server so you don't have like two different this is like a weird smell right that you have a webpack dev server and your rail server running next to each other it should just be the same thing i think i don't know the experience is rough inside of rails but but man this is beautiful look at this okay so name title email role and then an edit button cool so we're going to like try to drop our stuff into the same thing so we go to our form form for index again this is for like a bunch of form 4 filings from the u.s security and exchange commissions i'm actually going to split this so that i can look at all of my headings and all of these headings here so ticker and then date and is officer is director let's see is ten percent owner uh some shares uh shares after and then percent change we'll put all there and the insider's name okay and then here so inside the team body i want to iterate over all fours for this page and i want to spit out the um this is going to be a link to the form for company.typical.upcase and that's a link to the company so i don't know like i'm gonna have to figure out how to pass uh tailwind classes when i'm using like the rails helpers which should be fine form four dot uh file date let's just see how that looks right now okay something is exploding form four dot account paginate uh i'm like probably missing something oh right at the end of the tr here i need like end oh sweet oh my gosh it's so beautiful okay but one of the things that looks it looks kind of dorky is that it's like edge to edge and i would probably just leave it like that if it's only gonna be me using this but let me try to like figure out how you're supposed to actually do this so from the tailwind docks um i'm hoping there's some sort of like top level container thing that tells me let's see um no components is there like a very top level page um stacked layouts what is that okay i'm guessing this dashboard thing is supposed to go at the top and then you put your actual dashboard inside i don't know let's see what the code looks like um oh wow that's a lot of code okay copy and then i'm going to go over to my i'm just going to dump it in application html because this is going to be this is like my master layout sort of and i'm going to paste in the entire thing and say i'm going to i need to move this yield to where like the content is actually rendered and i'm guessing that it's supposed to be like in here somewhere well it says it says in the comment there very nicely replace with your content uh so let me just paste yield there and we'll have the div below it just in case um and then we'll come back over here and refresh oh my god that is incredible my mind is blown right now i love being able to just copy and paste like that okay well worth the 250 bucks thank you very much this is this is amazing holy smokes like i'm so i'm used to just going to um like theme forest and like downloading a whole theme and trying to like extract different components and pieces of it but it doesn't give you it in this componentized way that helps like build each of the pieces together so man this is so nice holy smokes okay i don't know how to make this thing go away but whatever we can figure that out so we've got the dashboard and then we have like the number of form fours and then some numbers here that this is our pagination there's probably like a pagination component or something but let's keep filling out the table um and yeah also yeah what does it look like at the bottom here uh oh wait to do yeah okay i think that's totally fine i don't know like if i delete this this div here i don't know if that's gonna ruin stuff but probably not yeah okay totally fine totally fine all right so our application layout is good enough for me right now we can go back and add the links in the dashboard later that's cool um but let's keep going with the uh the content here so what do we got next we've got our file date and then we need like our officer director 10 owner let's see so all right so got our file date we got uh is officer is director is 10 owner is other some shares some shares after and then this one is going to be insider.name and we'll just delete those refresh the page okay so now this thing is kind of blowing up because i have this there's like an edit this edit thing but i kind of want to figure out how to move this class into my my link tag so link to and then i think i can say maybe i can say just like class class does that work yeah it totally worked look at that beautiful now these are links and um now i just need to delete that one at the bottom this one and i think yeah we can just like delete the rest of this page and we should be good to go okay so i'm off by one right i've got the ticker date is officer director 10 owner uh the some shares stuff is actually like form four dot sum shares after uh form four dot percent change oh i missed an r i missed an r oh sweet okay let's make that like a percentage no is that not a thing rails percentage erb helper number two percent okay oops okay what's number two percentage i mix them up boom look at that zero percent minus four percent okay but something is still off by one so director officer director 10 percent owner and other got it so this should be is other again we're continuing to work on our tool for tracking insider trades from the sec's filings and we're building just like a way to alert and notify ourselves when those happen and so what this what we're looking at right now is individual trades that have been filed with the sec we see the ticker symbol for the company that was bought so it looks like david here bought some palantir on april 15th and david is an officer he bought 995 shares which is like a drop in the bucket for david it's less than i mean it's zero percent basically of his holdings i'm guessing he's probably just got some sort of uh like maybe this is part of his paycheck right um and then a couple of couple other folks here they're selling whatever but this is super cool this is like this was incredibly easy to install and get set up with tailwind ui so i'm going to actually drop it there and call that good and then i'm going to go in and play around with some more of the components and try to make this thing look really beautiful one of the other thing too that's weird is that like the insider's name is sometimes super long um and if we go if we go even like i think page one like andreessen horowitz fund with like all the lps and all the people who invested in what is this okay so this is a coin based sale from april 14th and yeah like negative infinity they sold all their shares right and so but the name of this insider is like super massive so i probably just want to truncate after 80 characters or something so is there a rails truncate helper there's probably a way to do this in css i don't know is there like a tailwind truncate i don't know text overflow how do you do that truncate no way there's a truncate okay so let's see insider insider name can i just say like truncate here truncate is that going to work no okay i'm assuming that depends on truncate yeah i bet it depends on like the width of the thing like being fixed somehow which i don't know how to do so medium overflow clip that's for responsive design when you're on a medium device though i think right so yes a screen size so how the heck um do i have to like make the width fixed for this table data um fix width table data tailwind table layout let's see [Music] max width this is kind of what i want yeah max width um medium i don't know is that that would be super cool if i could just drop that on there let's see um oops matt all right max wm oh md so i think there like there's a bunch of little like rules that you learn over time about oh my goodness so so sick okay that was like incredibly easy look at that that's so beautiful all right so let's let's make it even smaller max width small okay that's cool all right so the the other thing that i think is like all of this is officer director owner this is like trash in the table like i'm not able to actually like visualize what this means so i think i'm gonna change how that's laid out um but yeah i think i'm like incredibly impressed that this thing worked like this i didn't think this was gonna work out of the box with tail just like tailwind stuff i thought i'd have to do that with rails so really really impressed really cool and um yeah thanks for thanks for tailwind folks and i'll call it there hopefully you enjoyed if you did i would appreciate a quick like and i'll continue hacking around on this project so if you want to follow along go ahead and subscribe and then yeah as always we'll see you next time [Music] cheers

Channel: CJ Avilla

Views: 5,377

Keywords: Adding Tailwind UI to Ruby on Rails, Tailwind UI, Tailwind, Rails, Ruby on Rails, Ruby on rails tutorial, How to add Tailwind UI to Rails, How to add Tailwind UI to Ruby on Rails

Id: qPquD5AmKVU

Length: 26min 35sec (1595 seconds)

Published: Wed May 05 2021