Blazor Tailwind Component Core

Description

Blazor Tailwind Component Core is a library for creating custom Blazor components built on the Tailwind CSS framework. This library simplifies the integration of visual components into Blazor applications by providing a base class for component creation and css class mapping with the Tailwind framework.

The library provides the abstract class BlazorComponentBase for its own customised component and the class TailwindCssProperty for css properties.

For each css property, it is possible to define a scope per element, so that each html tag receives its own specific css classes (an example will better clarify the usage)

This allows you to optimise the use of css classes through the use of code and greater customisation by the user of your component

It is possible to change the value of the css properties when an event (click) occurs, with the component layout automatically updating to reflect the new configuration.

The library provides the following css files:

• style.css: contains all mapped css classes
• colour.css: contains the text and background colour classes

How to use the file stylesheets them within your project?

1. Install the library from Nuget: https://www.nuget.org/packages/Maurosoft.Blazor.Tailwind.Core/
2. Add <link rel="stylesheet" href="_content/Maurosoft.Blazor.Tailwind.Core/css/style.css" /> or <link rel="stylesheet" href="_content/Maurosoft.Blazor.Tailwind.Core/css/colour.css" /> to your App.razor file, inside

Example

MyComponent.razor

@using Maurosoft.Blazor.Tailwind.Core;
@using Maurosoft.Blazor.Tailwind.Core.Css;
@using Maurosoft.Blazor.Tailwind.Core.Enums;
@using Maurosoft.Blazor.Tailwind.Core.ExtensionMethods;
@using Maurosoft.Blazor.Tailwind.Core.Interfaces;
@namespace MyNamespace
@inherits BlazorComponentBase

<div class="@RenderCssProperty(TailwindCssPropertyScopeBase.Container)">
    <div>
        <div class="@RenderCssProperty(TailwindCssPropertyScopeBase.Content)">
            <div class="@RenderCssProperty(TailwindCssPropertyScopeBase.Content1)">
        </div>
        <span class="@RenderCssProperty(TailwindCssPropertyScopeBase.Label)">Label</span>
    </div>
</div>

MyComponent.razor.cs

using Maurosoft.Blazor.Tailwind.Core.Css;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.Backgrounds;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.Borders;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.FlexboxGrid;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.Layout;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.Sizing;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.Spacing;
using Maurosoft.Blazor.Tailwind.Core.Css.Properties.Typography;
using Maurosoft.Blazor.Tailwind.Core.Enums;
using Maurosoft.Blazor.Tailwind.Core.ExtensionMethods;
using Maurosoft.Blazor.Tailwind.Core.Interfaces;
using Microsoft.AspNetCore.Components;

namespace MyNamespace

public partial class MyComponent : BlazorComponentBase
{
    protected override bool ShouldAutoGenerateId => true;

    protected override string IdSuffix => "mycomponent-";

    protected override void OnInitializeCssProperties()
    {
        //mt-10 flex flex-wrap justify-center gap-6
        AddOrUpdateCssProperty(new TailwindCssProperty<MarginTop>(MarginTop.mt_10, TailwindCssPropertyScopeBase.Container), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<Display>(Display.Flex, TailwindCssPropertyScopeBase.Container), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<JustifyContent>(JustifyContent.Justify_Center, TailwindCssPropertyScopeBase.Container), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<Gap>(Gap.Gap_6, TailwindCssPropertyScopeBase.Container), false);

        //mb-3 flex items-center gap-2
        AddOrUpdateCssProperty(new TailwindCssProperty<MarginBottom>(MarginBottom.mb_3, TailwindCssPropertyScopeBase.Content), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<Display>(Display.Flex, TailwindCssPropertyScopeBase.Content), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<AlignItems>(AlignItems.Items_Center, TailwindCssPropertyScopeBase.Content), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<Gap>(Gap.Gap_2, TailwindCssPropertyScopeBase.Content), false);

        //relative overflow-hidden rounded-lg
        AddOrUpdateCssProperty(new TailwindCssProperty<Position>(Position.Relative, TailwindCssPropertyScopeBase.Content1), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<BorderRadius>(BorderRadius.Rounded_Lg, TailwindCssPropertyScopeBase.Content1), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<Overflow>(Overflow.Hidden, TailwindCssPropertyScopeBase.Content1), false);

        //block text-center font-medium
        AddOrUpdateCssProperty(new TailwindCssProperty<Display>(Display.Block, TailwindCssPropertyScopeBase.Label), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<FontWeight>(FontWeight.Font_Medium, TailwindCssPropertyScopeBase.Label), false);
        AddOrUpdateCssProperty(new TailwindCssProperty<TextAlign>(TextAlign.Text_Center, TailwindCssPropertyScopeBase.Label), false);
    }

    protected override void OnGenerateCssClasses()
    {

    }
}

Features

• Base class for components: Allows the creation of custom Blazor components with a predefined structure.
• Tailwind CSS mapping: Facilitates the association of Tailwind classes with Blazor components.

Requirements

• .NET 8.0 or later

List of mapped Tailwind Css Classes (https://tailwindcss.com/docs/installation)

Layout (17/20)

• Aspect Ratio
• Container
• Columns
• Break After
• Break Before
• Break Inside
• Box Decoration Break
• Box Sizing
• Display
• Floats
• Clear
• Isolation
• Object Fit
• Object Position
• Overflow
• Overscroll Behavior
• Position
• Top / Right / Bottom / Left
• Visibility
• Z-Index

Flexbox e Grid (21/24)

• Flex Basis
• Flex Direction
• Flex Wrap
• Flex
• Flex Grow
• Flex Shrink
• Order
• Grid Template Columns
• Grid Column Start / End
• Grid Template Rows
• Grid Row Start / End
• Grid Auto Flow
• Grid Auto Columns
• Grid Auto Rows
• Gap
• Justify Content
• Justify Items
• Justify Self
• Align Content
• Align Items
• Align Self
• Place Content
• Place Items
• Place Self

Spacing (3/3)

• Padding ([x] bottom, [x] top, [x] left, [x] right, [x] start, [x] end, [x] x, [x] y)
• Margin ([x] bottom, [x] top, [x] left, [x] right, [x] start, [x] end)
• Space Between ([x]) x, [x] y)

Sizing (6/6)

• Width
• Min-Width
• Max-Width
• Height
• Min-Height
• Max-Height
• Size

Typography (8/28)

• Font Family
• Font Size
• Font Smoothing
• Font Style
• Font Weight
• Font Variant Numeric
• Letter Spacing
• Line Clamp
• Line Height
• List Style Image
• List Style Position
• List Style Type
• Text Align
• Text Color ([x] focus, [x] hover)
• Text Decoration
• Text Decoration Color
• Text Decoration Style
• Text Decoration Thickness
• Text Underline Offset
• Text Transform
• Text Overflow
• Text Wrap
• Text Indent
• Vertical Align
• Whitespace
• Word Break
• Hyphens
• Content

Backgrounds (4/9)

• Background Attachment
• Background Clip
• Background Color ([x] focus, [x] hover)
• Background Origin
• Background Position
• Background Repeat
• Background Size
• Background Image
• Gradient Color Stops

Borders (9/15)

• Border Radius
• Border Width ([x] bottom, [x] top, [x] left, [x] right, [x] start, [x] end)
• Border Color
• Border Style
• Divide Width
• Divide Color
• Divide Style
• Outline Width
• Outline Color ([x] focus)
• Outline Style ([x] focus)
• Outline Offset
• Ring Width
• Ring Color
• Ring Offset Width
• Ring Offset Color

Effects (2/5)

• Box Shadow
• Box Shadow Color
• Opacity
• Mix Blend Mode
• Background Blend Mode

Filters (0/18)

• Blur
• Brightness
• Contrast
• Drop Shadow
• Grayscale
• Hue Rotate
• Invert
• Saturate
• Sepia
• Backdrop Blur
• Backdrop Brightness
• Backdrop Contrast
• Backdrop Grayscale
• Backdrop Hue Rotate
• Backdrop Invert
• Backdrop Opacity
• Backdrop Saturate
• Backdrop Sepia

Tables (1/4)

• Border Collapse
• Border Spacing
• Table Layout
• Caption Side

Transitions & Animation (0/5)

• Transition Property
• Transition Duration
• Transition Timing Function
• Transition Delay
• Animation

Transforms (1/5)

• Scale
• Rotate
• Translate
• Skew
• Transform Origin

Interactivity (1/15)

• Accent Color
• Appearance
• Cursor
• Caret Color
• Pointer Events
• Resize
• Scroll Behavior
• Scroll Margin
• Scroll Padding
• Scroll Snap Align
• Scroll Snap Stop
• Scroll Snap Type
• Touch Action
• User Select
• Will Change

SVG (0/3)

• Fill
• Stroke
• Stroke Width

Accessibility (0/2)

• Screen Readers
• Forced Color Adjust

Contributing

Contributions, bug reports, and feature requests are welcome! To contribute:

1. Fork the repository.
2. Create a new branch for your changes.
3. Submit a pull request for review.

License

Distributed under the MIT License. See the LICENSE file for more details.