Tailwind Dynamic Themes...Help!

#tailwindcss #help #ionic

Loving Tailwind! Need Dynamic Themes... Help!

Tailwind has made writing HTML fun for me again! I am really enjoying porting my site over into Gatsby, not using web components and really just getting back to html! A missing part of this however are dynamic themes. As you can see in the video I really like offering this simply capability for my users.

Why doesn't this work?

After including tailwind in my Gatsby project I just use it for things like setting the background:

<div class="bg-ajonp-primary-500"></div>

When you look in the debug tools it is represented with straight css for that class that includes the hex color.

.bg-ajonp-primary-500 {
    background-color: #7b1fa2;
}

What I would like this to say is

.bg-ajonp-primary-500 {
    background-color: var(--ajonp-primary-500);
}

Research so far

I did some research surrounding this plugin.

https://www.npmjs.com/package/tailwind-css-variables

I am not fully sure that any of the classes for colors will actually be referenced using the default tailwind classes. So this is the part I need help understanding.

How do I accomplish this in Ionic?

I have been using Ionic v4 (aka core) all components utilize root level css variables for referencing. This allows us to easily switch those themes by changing those variables. The pull request below shows a great example of how to use this in any Ionic project.

I have put in a request for adding this to be part of the Ionic docs.

https://github.com/ionic-team/ionic-docs/pull/929

Have you done this or know of anyone who might know?

Would really appreciate it if anyone has insights! You can reach me on all the things below if a comment hear doesn't feel good (although this is a safe place in my opinion).

🌎 Site: https://ajonp.com
🎥 YouTube: https://bit.ly/ajonp-youtube-sub
📦 GitHub: https://github.com/ajonpllc
💬 Slack: https://bit.ly/ajonp-slack-invite
🐦 Twitter: https://bit.ly/ajonp-twitter