Building a Premium Cyberpunk Neon Theme with Tailwind CSS

ইউজার ইন্টারফেস (UI) ডিজাইনে আধুনিক ডার্ক থিমের ট্রেন্ড ছাড়িয়ে এখন রাজত্ব করছে **Cyberpunk** বা ফিউচারিস্টিক নিয়ন টেক নান্দনিকতা। গ্লিচ ইফেক্ট, ডিপ ডার্ক ব্যাকগ্রাউন্ড এবং উজ্জ্বল নিয়ন বর্ডারের মিশ্রণ যেকোনো সাধারণ ওয়েব অ্যাপ্লিকেশনকে একদম প্রিমিয়াম লেভেলে নিয়ে যায়।

ইউটিলিটি-ফার্স্ট সিএসএস ফ্রেমওয়ার্ক **Tailwind CSS** দিয়ে এই ধরণের কাস্টম গ্লো বা শ্যাডো ইফেক্ট তৈরি করতে হলে ডিফল্ট কনফিগারেশন ফাইলটি এক্সটেন্ড করতে হয়। আজকের গাইডে আমরা দেখবো কীভাবে কোনো বাড়তি ভারী সিএসএস ফাইল ছাড়াই নিঁখুত সাইবারপাঙ্ক থিম আর্কিটেকচার তৈরি করা যায়।

১. কনফিগারেশন: `tailwind.config.js` এক্সটেন্ড করা

প্রথমে আমাদের থিমের মূল ভিত্তি বা নিয়ন কালার প্যালেট এবং কাস্টম ড্রপ-শ্যাডো গুলো টেইলউইন্ডের কনফিগ ফাইলে ইনজেক্ট করতে হবে। আপনার প্রোজেক্টের কনফিগ ফাইলটি এভাবে আপডেট করুন:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        cyber: {
          dark: '#030712',
          card: '#0b0f19',
          neonPink: '#ff007f',
          neonCyan: '#00f6ff',
          neonYellow: '#ffee00',
        }
      },
      boxShadow: {
        'neon-pink': '0 0 10px #ff007f, 0 0 40px rgba(255, 0, 127, 0.3)',
        'neon-cyan': '0 0 10px #00f6ff, 0 0 40px rgba(0, 246, 255, 0.3)',
      },
      textShadow: {
        'neon': '0 0 8px #00f6ff, 0 0 20px rgba(0, 246, 255, 0.5)',
      }
    },
  },
  plugins: [],
}

ধাপ ২: ফিউচারিস্টিক নিয়ন কার্ড উপাদান তৈরি

কনফিগারেশন শেষ হলে আপনি সরাসরি আপনার এইচটিএমএল ফাইলে টেইলউইন্ডের কাস্টম ইউটিলিটি ক্লাসগুলো গ্লোয়িং বর্ডার এবং নিয়ন ভাইব তৈরির জন্য ব্যবহার করতে পারবেন। নিচে একটি প্রিমিয়াম ড্যাশবোর্ড কার্ডের উদাহরণ দেওয়া হলো:

<!-- Cyberpunk glowing card component -->
<div class="bg-cyber-card border border-cyber-neonCyan/30 rounded-xl p-6 shadow-neon-cyan transition-all duration-300 hover:border-cyber-neonPink hover:shadow-neon-pink group">
    <span class="text-xs font-bold uppercase tracking-widest text-cyber-neonYellow">
        System Matrix
    </span>
    <h3 class="text-xl font-extrabold text-white mt-2 group-hover:text-cyber-neonPink transition-colors">
        Aira AI Central Core
    </h3>
    <p class="text-gray-400 text-sm mt-2">
        Quantum data processing array is fully synchronized with edge servers.
    </p>
    <button class="mt-4 px-4 py-2 bg-transparent border border-cyber-neonCyan text-cyber-neonCyan rounded-md font-medium text-xs uppercase tracking-wider shadow-[inset_0_0_4px_#00f6ff] hover:bg-cyber-neonCyan hover:text-black transition-all">
        Execute Protocol
    </button>
</div>