New website design!
It took me several weeks to redesign everything and it was a TON of work. The main chunk of work was moving from Bootstrap to TailwindCSS and that's quite a lot of effort because you have to rewrite basically every line of HTML and re-implement all the Javascript functionality for modals, tabs, etc. It's finally complete enough to launch, so I'm super excited! 🙌
If there's anything I missed, please let me know!
Thanks guys!
@Matthias, the main reason to move away from Bootstrap is that while it's good to get something up quick, it's really hard to undo all their styles to build something custom with it. At a certain point you might as well build it from scratch. Since Tailwind works in reverse, you can implement virtually any design without having to write custom CSS which is nice. Check out Adam Wathan's videos on YouTube where he re-implements several popular sites like Coinbase in like an hour with Tailwind. Really great tool if you want to implement your own designs. TailwindUI is great for kind of bridging the gap between Bootstrap and Tailwind. That's what I used here.
Hi, Chris! As I see you’re using alpinejs on this site instead of stimulus from your videos. Is there any reason to switch from stimulus to alpine?
Oh simply because that's what TailwindUI was using and I wanted to ship the site instead of porting their examples to Stimulus. I forgot I still need to convert those!
Hi Chris,
I was curious if you're considering doing a video on how to implement Alpine.js or Stimulus with TailwindUI?
I just purchased TailwindUI to help get my current application up and running and now I'm digging into figuring out how to use either Alpine.js or Stimulus to implement the functionality of the designs — and would certainly love any guidance from a video of yours.
Thanks either way and looks great!
TailwindUI does have the Alpine JS examples on the site if you inspect the page I believe. And I agree, will definitely add this to my list of episode ideas!
Would be interested in hearing how you cut down on the repetitiveness of Tailwind on your new design. I could see using partials to help w/ that quite a bit, but what about other areas? One example that comes to mind is GoRails navbar links. Were the set of classes for those links just entered multiple times given the low # of times you'd reuse those particular set of styles? Or are there other tricks you use here?
@Luke I'm using Tailwind in a few projects and I am mostly using the Tailwind helper classes and/or TailwindUI examples to mock something up quickly, and then when I'm happy with it, I'll write it in CSS. Something like:
<div class="bg-gray rounded px-3 py-2">Hello</div>
could be reimplemented as:
.gray-badge {
@apply bg-gray rounded px-3 py-2;
}
At that point you can reuse that class wherever you want. I have found that the @tailwindcss/typography plugin is pretty helpful to get articles or messages formatted easily and quickly. It works pretty well with ActionText, for example.
The new version of Tailwind (2.x) is pretty exciting but I don't think it works with Webpacker until they release a new version that includes PostCSS 8.
I do use @apply in a few places like buttons, but that's about it. We talked to Adam Wathan on Remote Ruby Episode #97 about this recently and he advised on not using @apply which was interesting. Definitely give that a listen.
For the most part, I've copied a lot of components from TailwindUI and tweaked them without extracting out my own classes. He recommends using partials or something like ViewComponent instead of @apply.
@Mylan, you can use TailwindCSS 2.0 with Wepbacker! You just need to use the master branch for the gem and node module for the time being. I fixed a bug in Webpacker to make it work the day that TailwindCSS 2.0 came out so I could update Jumpstart Pro for it. 👍
Kieran and I worked on it that night and wrote up our steps: https://www.kieranklaassen.com/upgrade-rails-to-tailwind-css-2/
@Chris thanks for the tip on Webpacker, I'll take a look. I did notice that they had PostCSS 8 in master, but wasn't sure if it was in a usable state. I'll have to check out that advice on @apply.
