CSS Episodes - Ruby on Rails Screencast Tutorials

Rails new with TailwindCSS

Nov 26, 2025 Pro

To start, let's create our Rails app for our domain monitoring SaaS. We'll also setup TailwindCSS so that we can design the UI as we build it.

12m

Live Reloading with Hotwire Spark

Dec 23, 2024

Hotwire Spark is a new live reloading tool for Hotwire applications that uses morphing to update the page smoothly.

42m

Designing our Web Scraper UI with TailwindCSS

Feb 29, 2024 Pro

TailwindCSS is an excellent CSS framework for letting us quickly iterate on design ideas to make our UI much cleaner and easier to use.

12m

Responsive Navigation with Turbo

Mobile and desktop versions of widgets often need to be completely different. Navigation and tabs on mobile don't work well when there are lots of items so we'll show you how to use Turbo and a select tag for mobile navs.

18m

Styling The Password Manager with TailwindCSS

Jun 08, 2023 Pro

We're ready to spruce up our Password Manager design with a little TailwindCSS.

Adding TailwindCSS to Rails

Apr 03, 2023

Our blog doesn't look great. We're going to install TailwindCSS so we can easily style our Rails application however we want.

How to use CSS Variables with Ruby on Rails

Mar 28, 2022

CSS Variables or CSS custom properties allow you to define variables that can be used throughout your CSS to change properties and their values dynamically. It's a wonderful feature for allowing users to customize the look of your website.

12m

How to use jQuery & jQueryUI with Esbuild

Oct 25, 2021

Using jQuery and plugins like jQueryUI in modern Javascript can be a little tricky. We'll see how to use it, how to deal with javascript import hoisting and how to add plugins like jQueryUI

How to use Bootstrap with CSS bundling in Rails

Oct 11, 2021

Installing Bootstrap is easier than ever thanks to CSS Bundling in Rails now. It also wires up the Javascript so you don't have to do much of anything.

15m

How to use AMP with Ruby on Rails

Aug 08, 2019 Pro

Learn how to add support for Accelerated Mobile Pages (AMP) from Google to Ruby on Rails in this tutorial

How to use Bootstrap with Webpack & Rails

Apr 30, 2019

Rails's webpacker gem makes it super easy to load both Bootstrap's CSS and JS into your Rails app using webpack

11m

How to Remove Unused CSS Classes from Tailwind CSS, Boostrap, and more with PurgeCSS

Apr 24, 2019

CSS frameworks like Tailwind, Bootstrap, Foundation, etc all come with many CSS classes you probably aren't using. This creates huge CSS files unless we use a tool like PurgeCSS to look through our code and remove the unused classes.

How to install TailwindCSS 1.0 with Rails 6

Apr 16, 2019

With TailwindCSS 1.0 just around the corner and some changes in Rails 6 to Webpacker, we take a look at how to install and setup the latest version of TailwindCSS with Rails 6.0

14m

How to use Javascript via Webpacker in Rails 6

Apr 12, 2019

Rails 6 defaults to using Webpacker for Javascript instead of the asset pipeline. We'll learn how everything is structured and laid out and see how to add Flatpickr to Rails 6 including both the Javascript and CSS for it.

14m

Vue.js Slots with Tailwind CSS and Rails

May 02, 2018

Learn how to use Vue.js slots to make even more reusable components. In this episode, we build a dropdown menu for Tailwind CSS apps using Vue.js slots.

12m

How to install Tailwind CSS using Webpacker with Rails

Feb 06, 2018

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

Filter By

All Episodes Free Episodes Pro Episodes

Sort By

Published Date Popularity