Correct me if I'm wrong, as your vision creating it may differ from mine.
Looking at the current components, looks like you have two version of every block, a dark and a light one. For you to make a change in one component, you actually have to change 2 files. For people using it and trying to use both themes, they have to implement some sort of theming.
I've recently created a plugin for creating themes for Tailwind, that I think you could benefit.
You can see it live here: https://tailwindcss-multi-theme.now.sh/
eg. This is the current blocks/cta/light/a.js
:
<section className="text-gray-700 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">
Slow-carb next level shoindxgoitch ethical authentic, scenester
sriracha forage.
</h1>
<button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
Button
</button>
</div>
</div>
</section>
Using the plugin, you would need only one file blocks/cta/a.js
(half the maintenance):
<!-- 👇 -->
<section className="text-gray-700 dark:bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
<!-- 👇 -->
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900 dark:text-white">
Slow-carb next level shoindxgoitch ethical authentic, scenester
sriracha forage.
</h1>
<button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
Button
</button>
</div>
</div>
</section>
Note that it only adds dark
as a variant, so it doesn't require any new syntax, just plain old Tailwind CSS and would only be applied when .theme-dark
was present on a parent (or html
or body
), and could benefit from prefers-color-scheme
to auto apply themes based on user preference. *Also, your other theme props stay untouched.
If you're interested in how it works, you can visit the repo or ask me anything.