Multiple color theme support, step by step.
Throughout this workshop, we'll add support for multiple color themes that can be added to any project using Tailwind CSS.
We'll take it step by step, starting with a CSS file and ending with a pretty neat Tailwind CSS plugin that dynamically generates color utilities based on a themes object input.
-
00. Workshop starting point
-
01. Define colors as CSS variables
-
02. Restore color opacity support
-
03. Tailwind plugin "Hello World"
-
04. Move CSS vars into plugin
-
05. Derive RGB channels with JS
-
06. Loop over color themes
-
07. Extend theme via plugin
-
08. Take the plugin for a spin!
-
09. Generate colors dynamically
-
10. Define themes in Tailwind config
-
11. Pass themes as a plugin option
-
12. What next?