Fade/Transition Tailwind Class to Something Else Over Certain Amount of Time

Fade/transition tailwind class to something else over certain amount of time?

You may create your own animation with config file

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      
      // that is animation class
      animation: {
        fade: 'fadeOut 5s ease-in-out',
      },

      // that is actual animation
      keyframes: theme => ({
        fadeOut: {
          '0%': { backgroundColor: theme('colors.red.300') },
          '100%': { backgroundColor: theme('colors.transparent') },
        },
      }),
    },
  },
  variants: {},
  plugins: [],
}

Use it like

<div class="w-40 h-40 animate-fade"></div>

Demo

P.S. However you may probably need some Javascript to trigger animate-fade classlist toggling or something as animation will proceed no matter does block is in viewport or not.

Tailwind animation ease

You have added only ease as the class. But tailwind have no class named ease. So you have to update your class ease with one of the following classes:

ease-in
ease-out
ease-in-out
ease-linear

For more information please refer to Official Tailwind Docs

TailwindCSS fade in Element on click

The solution is, you need to add duration, like this:

`transition-all duration-200 ${fade ? "opacity-100" : "opacity-0"}`

Here is my forked sandbox you had given, I've removed extra inline CSS, so it may become evident.

Here is the complete code:


function Header() {
  const [popCard, setPopCard] = useState("hidden");
  const [fade, setFade] = useState(false);

  const handleMenuClick = () => {
    setPopCard("inline-block");
    setFade(true);
  };

  const handleXClick = () => {
    setPopCard("hidden");
    setFade(false);
  };

  console.log(fade, "fade");

  return (
    <div className="text-center">
      <header className="sticky z-50 top-0  shadow-md bg-white border-b p-5">
        <div className="flex justify-between items-center">
          <h1 className="text-6xl text-red-500 cursor-pointer">Velvet</h1>
          <button
            className="text-3xl border rounded-lg px-5"
            onClick={handleMenuClick}
          >
            Menu
          </button>
        </div>
      </header>

      <div className="p-10">
        <div
          className={`transition-all duration-200    ${
            fade ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="flex justify-end">
            <button className="mt-2 mr-2 border p-2" onClick={handleXClick}>
              Close
            </button>
          </div>
          <div className="space-y-2 text-3xl text-center mt-5 mb-10 mx-5 text-red-500">
            <h1>Kontakt</h1>
            <h1>O Velvetu</h1>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Header;

Sandbox: https://codesandbox.io/s/sweet-swartz-mr3nru?file=/pages/index.js:41-1396

how to stop tailwindcss animation after a set time

There's no built-in way to do this. You can create your own class to override the iterations.

.temporary-bounce {
  -webkit-animation-iteration-count: 10;
  animation-iteration-count: 10;
}

For reference, the CSS for bounce is here.

https://tailwindcss.com/docs/animation#class-reference

Combining two transitions properties in Tailwind CSS

Only for TailwindCSS v3

Setting a class like transition-[transform, shadow] is interpretted by browsers as two separate classes: transition-[transform, and shadow].

You need to remove the space if possible or replace it by an underscore (_). That said, in your case you simply need to write:

transition-[transform,shadow]
// or
transition-[transform,_shadow]

If you want to customize their durations as well you can write something like:

[transition:transform_1s,shadow_2s]

Based on Adding Custom Styles - TailwindCSS v3

When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:
<div class="grid grid-cols-[1fr_500px_2fr]">
  
</div>
In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:
<div class="bg-[url('/what_a_rush.png')]">
  
</div>
In the rare case that you actually need to use an underscore but it’s ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won’t convert it to a space:
<div class="before:content-['hello\_world']">
  
</div>

Tailwind CSS & Alpine JS transition out issue

It's not getting a chance to do the out animation because you're applying a hidden class manually using the x-class binding.

You can remove the whole x-class set of conditions you've got there on line 4 - the x-show directive will handle all that for you in a way that manages the transition.

Just make sure you add the fixed class to your class= attribute so that it still gets applied to your CSS.

Svelte with Tailwind siding side panel: How do I set this up to use transitions?

Instead of using classes to hide or show your sidebar you should use an {#if} block wrapped around the entire aside element to hide and show the sidebar and overlay.

Then you can use the Svelte transition that is right for each element. In the Tailwind comments it's using translate-x-full for the panel transition to get a similar effect you can bind the clientWidth of the actual panel to a variable and use that as the x amount in your Svelte fly transition.

Something like this (I removed some of your code since you had no components linked and used Tailwind CDN so the Tailwind classes would work like in this REPL):

<script>
    import { fly, fade } from 'svelte/transition'
    let showSidePanel, width
    function toggleSidePanel() {
        showSidePanel = !showSidePanel
    }
</script>
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
<div>
    <button class="p-3" on:click={toggleSidePanel}>
        Show side panel
    </button>
</div>
{#if showSidePanel}
<aside class="relative z-10">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>
    <div class="fixed inset-0 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
                <div class="my-auto h-full w-screen max-w-2xl">
                    <div bind:clientWidth={width} transition:fly={{ x: width }} class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl">
                        <div class="px-4 sm:px-6">
                            <div class="flex items-start justify-between">
                                <h2 class="text-lg font-medium text-gray-900">
                                    Panel title
                                </h2>
                                <div class="ml-3 flex h-7 items-center">
                                    <button class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500" on:click={toggleSidePanel}>
                                        close
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="relative mt-6 flex-1 px-4 sm:px-6">
                            <div class="absolute inset-0 px-4 sm:px-6">
                                <div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true">Some content</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aside>
{/if}

Fade/Transition Tailwind Class to Something Else Over Certain Amount of Time