{"id":21935973,"url":"https://github.com/aksoftware98/tailwind_blazor_transition","last_synced_at":"2025-10-09T09:21:06.104Z","repository":{"id":45493332,"uuid":"347668382","full_name":"aksoftware98/tailwind_blazor_transition","owner":"aksoftware98","description":"AKSoftware.Blazor.TailwindTransition is a Blazor package to add support for the TailwindCSS transitions ","archived":false,"fork":false,"pushed_at":"2024-02-05T19:26:11.000Z","size":300,"stargazers_count":27,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-22T11:55:51.814Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aksoftware98.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-14T15:04:43.000Z","updated_at":"2025-03-10T22:39:36.000Z","dependencies_parsed_at":"2024-11-18T17:01:20.009Z","dependency_job_id":"46e37ecd-dfed-45ca-bcfa-9512f0a398c8","html_url":"https://github.com/aksoftware98/tailwind_blazor_transition","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aksoftware98/tailwind_blazor_transition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksoftware98%2Ftailwind_blazor_transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksoftware98%2Ftailwind_blazor_transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksoftware98%2Ftailwind_blazor_transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksoftware98%2Ftailwind_blazor_transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aksoftware98","download_url":"https://codeload.github.com/aksoftware98/tailwind_blazor_transition/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksoftware98%2Ftailwind_blazor_transition/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001123,"owners_count":26083021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T01:12:37.076Z","updated_at":"2025-10-09T09:21:06.065Z","avatar_url":"https://github.com/aksoftware98.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AKSoftware.Blazor.TailwindTransition\n\nAKSoftware.Blazor.TailwindTransition is a Blazor package to add support for the TailwindCSS \u0026 pre-built TailwindUI components transitions\n\nThe package contains 2 main components ***TWTransitionalElement*** \u0026 ***TWTransition***\nThe 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\n**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 \n\n## Get Started \n- Install the Nuget package\nFor *.NET CLI*\n```\n\tdotnet add package AKSoftware.Blazor.TailwindTransition\n```\nOr through the *Nuget Package Manager Console*\n``` PS\n\tInstall-Package AKSoftware.Blazor.TailwindTransition\n```\n\n- Then make sure you have Tailwind configured in your project, I highly recommend the following articles to get started:\n[By Matt Ferderer - Using Tailwind CSS with Blazor](https://mattferderer.com/tailwind-with-blazor)\n[By Chris Sanity -  Integrating Tailwind CSS with Blazor using Gulp - Part 1](https://chrissainty.com/integrating-tailwind-css-with-blazor-using-gulp-part-1/)\n\n- In the **_imports.razor** import the namespace\n  ``` Razor\n  using AKSoftware.Blazor.TailwindTransition\n  ```\nNow you are just good to go, the following sample existing the in src/demo folder and in the component Index.razor\nAnd basically it implements transition to show/hide a Slide-Over panel from the free TailwindUI components you can find it [here](https://tailwindui.com/components/application-ui/overlays/slide-overs) \n\nNow 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 \"**Entering,  EnteringFrom,  EnteringTo,  Leaving,  LeavingFrom,  LeavingTo,  Duration**\"\n\nThe following code shows the full Index.razor component from the demo project\n\n``` Razor\n@page \"/\"\n@using AKSoftware.Blazor.TailwindTransition\n\n\u003ch1 class=\"text-3xl\"\u003eWelcome to AKSoftware.Blazor.TailwindTransition\u003c/h1\u003e\n\u003cp\u003eThis library allows you to leverge the full power and capabilities of the TailwindCSS \u0026 TailwindUI components by providing you with the Transition component that you need to implement and take advantage of the smooth animation and Show/Hide transitions availabe out there\u003c/p\u003e\n\u003cp style=\"color:red\"\u003e\u003cb\u003eNote:\u003c/b\u003e Make sure to add TailwindCSS in your project you can check the index.html file to add Tailwind using the CDN (not recommended) or check out the following links\u003c/p\u003e\n\u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://mattferderer.com/tailwind-with-blazor\"\u003eUsing Tailwind CSS with Blazor\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://chrissainty.com/integrating-tailwind-css-with-blazor-using-gulp-part-1/\"\u003eIntegrating Tailwind CSS with Blazor using Gulp - Part 1\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3 class=\"text-3xl\"\u003eClick here to check the transition for show/hide a side panel\u003c/h3\u003e\n\u003cbutton @onclick=\"() =\u003e _isOpened = !_isOpened\" type=\"button\" class=\"inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\u003e\n    @(_isOpened ? \"Hide\" : \"Show\")\n\u003c/button\u003e\n\n\u003cSurveyPrompt Title=\"How is Blazor working for you?\" /\u003e\n\n\u003c!-- This example requires Tailwind CSS v2.0+ --\u003e\n\u003cTWTransitionalElement @bind-IsOpened=\"_isOpened\"\n                       AdditionalClasses=\"fixed inset-0 overflow-hidden\"\u003e\n    \u003cdiv class=\"absolute inset-0 overflow-hidden\"\u003e\n        \u003c!--\n          Background overlay, show/hide based on slide-over state.\n\n          Entering: \"ease-in-out duration-500\"\n            From: \"opacity-0\"\n            To: \"opacity-100\"\n          Leaving: \"ease-in-out duration-500\"\n            From: \"opacity-100\"\n            To: \"opacity-0\"\n        --\u003e\n        \u003cTWTransitionalElement @bind-IsOpened=\"_isOpened\"\n                               Entering=\"ease-in-out duration-500\"\n                               EnteringFrom=\"opacity-0\"\n                               EnteringTo=\"opacity-100\"\n                               Leaving=\"ease-in-out duration-500\"\n                               LeavingFrom=\"opacity-100\"\n                               LeavingTo=\"opacity-0\"\n                               Duration=\"500\"\n                               AdditionalClasses=\"absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity\"\u003e\u003c/TWTransitionalElement\u003e\n        \u003csection class=\"absolute inset-y-0 right-0 pl-10 max-w-full flex\" aria-labelledby=\"slide-over-heading\"\u003e\n            \u003c!--\n              Slide-over panel, show/hide based on slide-over state.\n\n              Entering: \"transform transition ease-in-out duration-500 sm:duration-700\"\n                From: \"translate-x-full\"\n                To: \"translate-x-0\"\n              Leaving: \"transform transition ease-in-out duration-500 sm:duration-700\"\n                From: \"translate-x-0\"\n                To: \"translate-x-full\"\n            --\u003e\n            \u003cTWTransition Entering=\"transform transition ease-in-out duration-500 sm:duration-700\"\n                               EnteringFrom=\"translate-x-full\"\n                               EnteringTo=\"translate-x-0\"\n                               Leaving=\"transform transition ease-in-out duration-500 sm:duration-700\"\n                               LeavingFrom=\"translate-x-0\"\n                               LeavingTo=\"translate-x-full\"\n                               Duration=\"500\"\n                               AdditionalClasses=\"relative w-screen max-w-md\"\u003e\n                \u003c!--\n                  Close button, show/hide based on slide-over state.\n\n                  Entering: \"ease-in-out duration-500\"\n                    From: \"opacity-0\"\n                    To: \"opacity-100\"\n                  Leaving: \"ease-in-out duration-500\"\n                    From: \"opacity-100\"\n                    To: \"opacity-0\"\n                --\u003e\n                \u003cTWTransition Entering=\"ease-in-out duration-500\"\n                              EnteringFrom=\"opacity-0\"\n                              EnteringTo=\"opacity-100\"\n                              Leaving=\"ease-in-out duration-500\"\n                              LeavingFrom=\"opacity-100\"\n                              LeavingTo=\"opacity-0\"\n                              Duration=\"500\"\n                              AdditionalClasses=\"absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4\"\u003e\n                    \u003cbutton  @onclick=\"() =\u003e _isOpened = !_isOpened\" class=\"rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white\"\u003e\n                        \u003cspan class=\"sr-only\"\u003eClose panel\u003c/span\u003e\n                        \u003c!-- Heroicon name: outline/x --\u003e\n                        \u003csvg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\"\u003e\n                            \u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" /\u003e\n                        \u003c/svg\u003e\n                    \u003c/button\u003e\n                \u003c/TWTransition\u003e\n                \u003cdiv class=\"h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll\"\u003e\n                    \u003cdiv class=\"px-4 sm:px-6\"\u003e\n                        \u003ch2 id=\"slide-over-heading\" class=\"text-lg font-medium text-gray-900\"\u003e\n                            Panel title\n                        \u003c/h2\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"mt-6 relative flex-1 px-4 sm:px-6\"\u003e\n                        \u003c!-- Replace with your content --\u003e\n                        \u003cdiv class=\"absolute inset-0 px-4 sm:px-6\"\u003e\n                            \u003cdiv class=\"h-full border-2 border-dashed border-gray-200\" aria-hidden=\"true\"\u003e\u003c/div\u003e\n                        \u003c/div\u003e\n                        \u003c!-- /End replace --\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/TWTransition\u003e\n        \u003c/section\u003e\n    \u003c/div\u003e\n\u003c/TWTransitionalElement\u003e\n\n@code \n{\n\n    private bool _isOpened = false; \n\n\n}\n```\n\nThe full documentation will be enhanced soon thank\nBuilt with love by [AK Ahmad Mozaffar](https://ahmadmozaffar)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faksoftware98%2Ftailwind_blazor_transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faksoftware98%2Ftailwind_blazor_transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faksoftware98%2Ftailwind_blazor_transition/lists"}