Redefining CSS Variables in Different Scopes
Course Content
0 / 28 completedIncrementally Introducing Complexity
A Primer on CSS Variables
Our App’s Tailwind Configuration Starting Point
Intro to the Multi-Theme Strategy Workshop
Redefining CSS Variables in Different Scopes
Creating Multiple Color Spreads with CSS Variables
Create Themable Color Shades with CSS Variables
Compose RGB Channels with alpha-value for Opacity Support
Building an Example All Caps Plugin for Tailwind CSS
Improve Your Developer Workflow with Tailwind CSS Plugins
Implementing Color Opacity with CSS Variables
Moving CSS Variable Declarations into a Tailwind CSS Plugin
Convert Hex to RGB with JavaScript
Transform CSS into CSS in JS for use in a Tailwind CSS Plugin
Replacing Hardcoded RGB Channel Values with Function Calls
Refactoring to Remove Hard-Coded Theme Names in Tailwind Plugin
Consolidating Code Concerns into a Tailwind Plugin
Configure Tailwind to Extend Themes via Plugin
Dynamically Adding Themes through Iteration
Testing The Multi-Theme Plugin by Replacing the Site-Wide Color in a Calendar App
Refactoring a Calendar App to Use the multi-theme Component
Dynamically Generate Colors From Nested Theme Objects
Write a Function That Replaces Hard-Coded Theme Colors
Create CSS Variables from Theme Objects with Recursion
Determine How to Pass Options to a Plugin
Dynamically Define Theme Colors In Your Tailwind Config
Enable and Validate Plugin Configuration Options
Next Steps for Theming Tailwind CSS Apps