20 Tailwind CSS Tips that will Amaze you

Tailwind CSS Tips & Trics

A list of different effects, animations you can create using tailwind with source code that will amaze you

What is Tailwind CSS

Tailwind CSS is a open sourced a utility-first CSS framework that provided single-purpose utility classes which are opinionated for the most part, and which help rapid development of web pages from right inside our html or jsx or tsx.

In this article we will discuss different types of useful effects we can create using tailwind css.

Here is the code

<div
  class="flex min-h-screen flex-col justify-center bg-gray-100 py-6 sm:py-12"
>
  <div class="relative mx-auto py-3 sm:max-w-xl">
    <nav x-data="{ open: false }">
      <button
        class="relative h-10 w-10 bg-white text-gray-500 focus:outline-none"
        @click="open = !open"
      >
        <span class="sr-only">Open main menu</span>
        <div
          class="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform"
        >
          <span
            aria-hidden="true"
            class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
            :class="{'rotate-45': open,' -translate-y-1.5': !open }"
          ></span>
          <span
            aria-hidden="true"
            class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
            :class="{'opacity-0': open } "
          ></span>
          <span
            aria-hidden="true"
            class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
            :class="{'-rotate-45': open, ' translate-y-1.5': !open}"
          ></span>
        </div>
      </button>
    </nav>
  </div>
</div>