Converting from CSS to Resources

.NET MAUI includes limited support for CSS, but it has never been a primary focus of the framework. As a result, its CSS feature set is relatively basic and lacks the robustness and flexibility found in traditional web development. Additionally, issues in the CSS subsystem may go unaddressed for extended periods, making it an unreliable foundation for scalable styling. For this reason, we're transitioning away from CSS-driven theming and moving toward ResourceDictionary-based styling. This not only aligns better with MAUI's native design patterns but also enables seamless integration with Crosswind Resources, allowing users to leverage shared variables and consistent theming across their own styles.

This document will be a working document on how to convert the current styles to Resources and what types best to target.

---

CSS Class	Applies to
bg-[color]-[shade]	VisualElement.BackgroundColor
border-[size]	Button.BorderWidth, ImageButton.BorderWidth, Border.StrokeThickness
rounded-[namedsize]	Border.StrokeShape, Button.CornerRadius, ImageButton.CornerRadius, BoxView.CornerRadius,
border-[color]-[shade]	Button.BorderColor, ImageButton.BorderColor, Border.Stroke
text-[color]-[shade]
flex-[type]
flex-[wraptype]
justify-[type]
items-[type]
content-[type]
self-
grow-
shrink-
basis-
size-[value]
w-[value]
h-[value]
max-w-[value]
min-w-[value]
max-h-[value]
min-h-[value]
p-[value]
px-[value]
py-[value]
pb-[value]
pl-[value]
pt-[value]
pr-[value]
m-[value]
mx-[value]
my-[value]
mb-[value]
ml-[value]
mt-[value]
mr-[value]
gap-[value]
gap-x-[value]
gap-y-[value]
scale-[value]
scale-x-[value]
scale-y-[value]
rotate-[value]
translate-[value]
translate-x-[value]
translate-y-[value]
text-[alignment]
text-[size]
font-[name]
uppercase/lowercase
leading-[size]
tracking-[size]
italic/underline/line-through
hidden/block
opacity-[value]