3 ms·
Using Tailwind is having an effect on how I build components. I've really fallen in love with Tailwind and atomic design. And I've discovered that Atomic desi
by emorning3 2y ago
Using Tailwind is having an effect on how I build components.
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 :-).