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.

Styles and target types

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	Converted
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]	VisualElement.WidthRequest, VisualElement.HeightRequest
w-[value]	VisualElement.WidthRequest
h-[value]	VisualElement.HeightRequest
max-w-[value]	VisualElement.MaximumWidthRequest
min-w-[value]	VisualElement.MinimumWidthRequest
max-h-[value]	VisualElement.MaximumHeightRequest
min-h-[value]	VisualElement.MinimumHeightRequest
p-[value]
px-[value]
py-[value]
pb-[value]
pl-[value]
pt-[value]
pr-[value]
m-[value]	View.Margin
mx-[value]	View.Margin
my-[value]	View.Margin
mb-[value]	View.Margin
ml-[value]	View.Margin
mt-[value]	View.Margin
mr-[value]	View.Margin
gap-[value]	HorizontalStackLayout.Spacing, VerticalStackLayout.Spacing, Grid.RowSpacing, Grid.ColumnSpacing
gap-x-[value]	HorizontalStackLayout.Spacing, Grid.ColumnSpacing
gap-y-[value]	VerticalStackLayout.Spacing, Grid.RowSpacing
scale-[value]	VisualElement.ScaleX, VisualElement.ScaleY	✅
scale-x-[value]	VisualElement.ScaleX	✅
scale-y-[value]	VisualElement.ScaleY	✅
rotate-[value]	VisualElement.Rotation	✅
translate-[value]	VisualElement.TranslateX, VisualElement.TranslateY	✅
translate-x-[value]	VisualElement.TranslateX	✅
translate-y-[value]	VisualElement.TranslateY	✅
text-[alignment]
text-[size]
font-[name]
uppercase/lowercase
leading-[size]
tracking-[size]
italic/underline/line-through	Label.TextDecorations
hidden/block	VisualElement.IsVisible	✅
opacity-[value]	VisualElement.Opacity	✅