Build A Laravel App With TDD: Easy Tailwind Themes Using CSS Variables

Your Teacher | Jeffrey Way

Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.

About This Episode

Published on Mar 27th, 2019

We have a relatively nice light theme at the moment. But what if we wanted to offer users the ability to toggle to a darker UI theme? How exactly might we accomplish that, considering that Tailwind classes like text-grey and text-blue are scattered throughout our HTML? The answer is to leverage CSS variables. I'll show you how in this episode.

View the source code for this episode on GitHub.

Laravel Shift

Discuss It

Looking for the archived Disqus comments?

Episodes

Meet Birdboard

Free Episode 2:31
Let's Begin With a Test

Free Episode 12:48
Testing Request Validation

5:32
Model Tests

7:33
A Project Requires An Owner

11:17
Scoping Projects

11:39
The Create Project View

6:38
Prepping the Frontend

8:19
Go Go Gadget Tailwind

Free Episode 16:39
Grid Spacing and Card Tweaks

16:56
Styling the Project Page

12:20
A Project Can Have Tasks

15:24
Task UI Updates

9:11
Task UI Updates: Part 2

18:31
Touch It

5:05
Notes and Policies

18:04
Improve Test Arrangements With Factory Classes

Free Episode 16:35
Reduce Form Duplication

14:06
Sometimes Validation With Form Requests

12:40
Project Activity Feeds

13:39
Project Activity Feeds: Part 2

13:53
Project Activity Feeds: Part 3

5:57
Project Activity Feeds: Cleanup

12:08
Rendering Activity With Polymorphism

10:35
The Subject of the Activity

12:00
Recording Model Changes

15:49
Get Into The Refactor Flow

21:47
Tweaking the Activity Card

13:51
Authorized Users Can Delete Projects

7:57
Layered Tests and Invitations

12:43
Beware False Positives

14:08
Gravatars and Helper Functions

7:26
Inviting Users as a Feature Test

15:11
Validation Errors For Multiple Forms

13:57
Invited Users May Not Delete Projects

6:03
Easy Tailwind Themes Using CSS Variables

Free Episode 14:06
Completed Themes Review

Free Episode 2:15
Build a Theme Switcher

15:07
The New Project Modal

12:20
The New Project Modal: Behavior

17:51
The New Project Modal: Tasks

4:45
Object-Oriented JavaScript

20:44
Make a Dropdown Vue Component

23:27
Wrap it Up

1:37

Laravel Shift

Back to Series Button