Maurosoft.Blazor.Tailwind.Core
1.0.4
dotnet add package Maurosoft.Blazor.Tailwind.Core --version 1.0.4
NuGet\Install-Package Maurosoft.Blazor.Tailwind.Core -Version 1.0.4
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Maurosoft.Blazor.Tailwind.Core" Version="1.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Maurosoft.Blazor.Tailwind.Core --version 1.0.4
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Maurosoft.Blazor.Tailwind.Core, 1.0.4"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Maurosoft.Blazor.Tailwind.Core as a Cake Addin #addin nuget:?package=Maurosoft.Blazor.Tailwind.Core&version=1.0.4 // Install Maurosoft.Blazor.Tailwind.Core as a Cake Tool #tool nuget:?package=Maurosoft.Blazor.Tailwind.Core&version=1.0.4
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
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?
- Install the library from Nuget: https://www.nuget.org/packages/Maurosoft.Blazor.Tailwind.Core/
- 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 <head></head>
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 (8/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 ( bottom, top, left, right, start, end, x, y)
- Margin ( bottom, top, left, right, start, end)
- Space Between () 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 ( focus, 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 ( focus, hover)
- Background Origin
- Background Position
- Background Repeat
- Background Size
- Background Image
- Gradient Color Stops
Borders (9/15)
- Border Radius
- Border Width ( bottom, top, left, right, start, end)
- Border Color
- Border Style
- Divide Width
- Divide Color
- Divide Style
- Outline Width
- Outline Color ( focus)
- Outline Style ( 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:
- Fork the repository.
- Create a new branch for your changes.
- Submit a pull request for review.
License
Distributed under the MIT License. See the LICENSE file for more details.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net8.0
- Ardalis.SmartEnum (>= 8.1.0)
- BlazorComponentUtilities (>= 1.8.0)
- Macross.Json.Extensions (>= 3.0.0)
- Microsoft.AspNetCore.Components.Web (>= 8.0.10)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on Maurosoft.Blazor.Tailwind.Core:
| Package | Downloads |
|---|---|
|
Maurosoft.Blazor.Components.Spinner
A beautiful loading spinner with overlay for Blazor apps with over 80 preset loader, high customization (size, position, background color, background opacity, ecc.) |
GitHub repositories
This package is not used by any popular GitHub repositories.