Inline style attributes vs CSS variables: a Tailwind v4 light-mode debug story

📰 Dev.to · Forrest Miller

Learn how to debug a CSS issue in a React application using Tailwind v4, by understanding the difference between inline style attributes and CSS variables.

intermediate Published 11 May 2026

Action Steps

Identify the CSS issue by inspecting the element in the browser's developer tools.
Understand how inline style attributes can override CSS classes.
Replace inline style attributes with CSS variables to improve maintainability and avoid conflicts.
Use the `style` attribute with CSS custom properties to control the background color.
Test and verify the fix by checking the element's styles in the browser's developer tools.

Who Needs to Know This

Frontend developers and designers who work with React and Tailwind CSS can benefit from this lesson, as it provides a practical example of how to troubleshoot a common CSS issue.

Key Insight

💡 Inline style attributes can override CSS classes, causing unexpected styling issues. Using CSS variables can help avoid these conflicts and improve maintainability.

Key Takeaways

Learn how to debug a CSS issue in a React application using Tailwind v4, by understanding the difference between inline style attributes and CSS variables.

Full Article

Title: Inline style attributes vs CSS variables: a Tailwind v4 light-mode debug story

URL Source: https://dev.to/forrestmiller/inline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic

Published Time: 2026-05-11T18:06:40Z

Markdown Content:
[Skip to content](https://dev.to/forrestmiller/inline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic#main-content)

[![Image 1: DEV Community](https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png)](https://dev.to/)

[Powered by Algolia](https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral)

[Log in](https://dev.to/enter?signup_subforem=1)[Create account](https://dev.to/enter?signup_subforem=1&state=new-user)

## DEV Community

![Image 2](https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg)0 Add reaction

![Image 3](https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg)0 Like ![Image 4](https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg)0 Unicorn ![Image 5](https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg)0 Exploding Head ![Image 6](https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg)0 Raised Hands ![Image 7](https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg)0 Fire

0 Jump to Comments 1 Save Boost

Copy link

Copied to Clipboard

[Share to X](https://twitter.com/intent/tweet?text=%22Inline%20style%20attributes%20vs%20CSS%20variables%3A%20a%20Tailwind%20v4%20light-mode%20debug%20story%22%20by%20Forrest%20Miller%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fforrestmiller%2Finline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic)[Share to LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fforrestmiller%2Finline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic&title=Inline%20style%20attributes%20vs%20CSS%20variables%3A%20a%20Tailwind%20v4%20light-mode%20debug%20story&summary=TL%3BDR%3A%20I%20shipped%20a%20%22light%20mode%20for%20the%20bingo%20caller%22%20feature%20three%20times.%20Each%20attempt%20rendered%20as...&source=DEV%20Community)[Share to Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fforrestmiller%2Finline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic)[Share to Mastodon](https://s2f.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fforrestmiller%2Finline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic)

[Share Post via...](https://dev.to/forrestmiller/inline-style-attributes-vs-css-variables-a-tailwind-v4-light-mode-debug-story-28ic#)[Report Abuse](https://dev.to/report-abuse)

[![Image 8: Forrest Miller](https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3872475%2F1b38c5a4-9313-4bc3-8bfd-a21db422888e.jpg)](https://dev.to/forrestmiller)

[Forrest Miller](https://dev.to/forrestmiller)
Posted on May 11

# Inline style attributes vs CSS variables: a Tailwind v4 light-mode debug story

[#css](https://dev.to/t/css)[#react](https://dev.to/t/react)[#tailwindcss](https://dev.to/t/tailwindcss)[#webdev](https://dev.to/t/webdev)

**TL;DR**: I shipped a "light mode for the bingo caller" feature three times. Each attempt rendered as dark navy squares on a white stage — totally unreadable. The bug was the same every time: an inline `style={{ background: hue.deep }}` in a React component winning over the CSS class meant to control the background. Moving from inline styles to inline CSS custom properties u

Read full article → ← Back to Reads

Inline style attributes vs CSS variables: a Tailwind v4 light-mode debug story

Key Takeaways

Full Article

Related Videos