AKSoftware.Blazor.TailwindTransition

AKSoftware.Blazor.TailwindTransition is a Blazor package to add support for the TailwindCSS & pre-built TailwindUI components transitions

The package contains 2 main components TWTransitionalElement & TWTransition The first component is the parent container for the full component that should be used to hide or show the full component, and the TWTransition is used to each div that needs to be transitioned Note: You can detected which div is a TWTransition from the TailwindUI components through the comments on top of each div that supports Show/Hide Transition

Get Started

• Install the Nuget package For .NET CLI

dotnet add package AKSoftware.Blazor.TailwindTransition

Or through the Nuget Package Manager Console

Install-Package AKSoftware.Blazor.TailwindTransition

• Then make sure you have Tailwind configured in your project, I highly recommend the following articles to get started: By Matt Ferderer - Using Tailwind CSS with Blazor By Chris Sanity - Integrating Tailwind CSS with Blazor using Gulp - Part 1

• In the _imports.razor import the namespace

  using AKSoftware.Blazor.TailwindTransition

Now you are just good to go, the following sample existing the in src/demo folder and in the component Index.razor And basically it implements transition to show/hide a Slide-Over panel from the free TailwindUI components you can find it here

Now in your component file paste the HTML content from TailwindUI website and then transform the parent div into a TWTransitionalElement and bind the IsOpened Attribute to a boolean variable then inside it follow the comments from Tailwind so you can know which div should be transformed into TWTranstion and using the properties ""