I've really fallen in love with Tailwind and atomic design.
And I've discovered that Atomic design can be more than just for styles, but for behavior and content generation too.
Here's a snippet of an annotation-driven version of Razor that I'm working on. This snippet composes a table of weather data using atomic annotations that add styles and behavior.
```
@@<Spacing MarginTop="@Theme.Spacing.Large" />
@@<Placeholder Show="@(!(forecasts?.Any()??false))" Variant="@Placeholder.Skeleton" />
@@<DataAnnotations All="@true" />
@@<PlQuickGrid />
<QuickGrid Items="@forecasts">
<PropertyColumn Property="@(c => c.Date)" />
<PropertyColumn Property="@(c => c.TemperatureC)" />
<PropertyColumn Property="@(c => c.TemperatureF)" />
<PropertyColumn Property="@(c => c.Summary)" />
</QuickGrid>```
Here's what the annotations do...
@@<Spacing> - adds TW class style equivalent to 'spacing-[--my-spacing-token-l]'
@@<Placeholder> - displays a skeleton placeholder, instead of the table, when loading data
@@<DataAnnotations> - extends the QuickGrid with formatting and label metadata found on forecast Type
@@<PlQuickGrid> - Applies custom component styles to a Blazor Quickgrid
The first three annotations are reusable across a wide variety of components.
Tailwind and atomic design have really taken hold of me, I'm gonna go all the way down that rabbit hole :-).