Skip to main content
00:00/00:00
Lecture 19 of 28

Dynamically Adding Themes through Iteration

Download Course (Free)

Course Content

0 / 28 completed
Section 1: Course Curriculum28 videos

Incrementally Introducing Complexity

3m

A Primer on CSS Variables

2m

Our App’s Tailwind Configuration Starting Point

4m

Intro to the Multi-Theme Strategy Workshop

2m

Redefining CSS Variables in Different Scopes

1m

Creating Multiple Color Spreads with CSS Variables

8m

Create Themable Color Shades with CSS Variables

4m

Compose RGB Channels with alpha-value for Opacity Support

2m

Building an Example All Caps Plugin for Tailwind CSS

1m

Improve Your Developer Workflow with Tailwind CSS Plugins

4m

Implementing Color Opacity with CSS Variables

5m

Moving CSS Variable Declarations into a Tailwind CSS Plugin

1m

Convert Hex to RGB with JavaScript

5m

Transform CSS into CSS in JS for use in a Tailwind CSS Plugin

3m

Replacing Hardcoded RGB Channel Values with Function Calls

3m

Refactoring to Remove Hard-Coded Theme Names in Tailwind Plugin

1m

Consolidating Code Concerns into a Tailwind Plugin

2m

Configure Tailwind to Extend Themes via Plugin

2m

Dynamically Adding Themes through Iteration

4mNow Playing

Testing The Multi-Theme Plugin by Replacing the Site-Wide Color in a Calendar App

7m

Refactoring a Calendar App to Use the multi-theme Component

7m

Dynamically Generate Colors From Nested Theme Objects

4m

Write a Function That Replaces Hard-Coded Theme Colors

2m

Create CSS Variables from Theme Objects with Recursion

11m

Determine How to Pass Options to a Plugin

3m

Dynamically Define Theme Colors In Your Tailwind Config

9m

Enable and Validate Plugin Configuration Options

9m

Next Steps for Theming Tailwind CSS Apps

5m