Token Deep Dive #2: The /50 That Did Nothing
The article discusses an issue encountered with Tailwind CSS when using CSS variables for opacity modifiers. The author initially aimed to create a clean architecture by using CSS variables but faced unexpected results when the opacity modifiers stopped working. The problem arose because Tailwind v3 requires raw color values at build time, which conflicts with the use of CSS variables that resolve at runtime.
- ▪The author experienced issues with opacity modifiers in Tailwind CSS after converting colors to CSS variables.
- ▪Tailwind v3 requires raw color values for opacity modifiers, leading to the loss of functionality when using CSS variables.
- ▪The author reverted some colors back to HEX values to restore the opacity modifiers while maintaining CSS variables for others.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3863968) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } 7onic Posted on May 18 • Originally published at blog.7onic.design Token Deep Dive #2: The /50 That Did Nothing #designtokens #tailwindcss #cssvariables #tailwindv3 The other day, I noticed something funky with my accordion component's hover state. It wasn't broken in an obvious, "error-thrown-in-console" kind of way. The background color changed when I hovered over it, sure, but the opacity was completely gone.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).
Discussion
0 commentsMore from DEV.to (Top)
