Gradient animated text with Tailwind CSS

Byakkuya (ahmed zbaa) — Sat, 20 Jul 2024 12:23:15 +0000

I've was working on a project recently and I wanted to add some cool effect on my landing page's hero section's text.
I've seen this effect on lots of sites and i want something simple because i use Tailwind css
so i find it somewhere online
and i wanted to share it with you
first you gonna add this to tailwind.config.js

modules.export = {
  theme: {
    extend: {
      animation: {
        text: 'text 5s ease infinite',
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
      },
    }
  }
}

then add these classes wherever you want

<h1 class="animate-text bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent text-5xl font-black">
   Gradient animated text with Tailwind CSS
</h1>

Docker Template for PERN Stack Project

Byakkuya (ahmed zbaa) — Wed, 17 Jul 2024 12:32:54 +0000

As part of my journey to master Docker🐳 and Docker Compose, I’ve completed a mini-project where I dockerized a simple PERN stack, which is my main stack.
🔗 GitHub Repo: https://lnkd.in/dXPfFWrx
With this repository, you can start working on a PERN stack project without setting up the development environment.
The stack includes:
Next.js, Axios, Node.js, Express..js, PostgreSQL, PrismaORM

📄 Instructions are in the repo.
Looking forward to your feedback!!

DEV Community: Byakkuya (ahmed zbaa)

Gradient animated text with Tailwind CSS

Docker Template for PERN Stack Project