Prototürk Youtube kanalında React-getir klonu videolarını izleyip uygularken bir sorun ile karşılaştım. 1. videonun 30. dakikasından itibaren yapmaya çalıştığımız gradient kısmını bir türlü yapamadım.İlk kod örneğindeki return'ün hemen altındaki div'in classlarında bir problem oluyor. Aynısını yaptığımı düşünmeme rağmen olmadı.Kendi kodlarımı ve görselleri paylaşacağım. Çözmeye çalıştığım kadarıyla before:from tarayıca gözükmüyor,videoyu uygulayan başka birisi varsa yardımcı olursa sevinirim.

import Slider from "react-slick";
export default function HeroSection() {

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <div className="relative before:bg-gradient-to-r before:from-primary-brand-color before:to-transparent before:absolute before:inset-0 before:h-full before:z-10">
      <Slider {...settings}>
        <div>
          <img className="w-full h-[500px] object-cover" src="https://getir.com/_next/static/images/getir-mainpage-1-757eca6a46304def60cabce74d3f20a2.jpg"></img>
        </div>

        <div>
          <img className="w-full h-[500px] object-cover" src="https://getir.com/_next/static/images/getir-mainpage-3-ffd1e98c5da51809f9adcc3a4a37d751.jpg"></img>
        </div>

      </Slider>
    </div>
  )
}

Tailwind.config.js dosyam

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundColor: theme =>({
        'brand-color': '#4c3398',
        'primary-brand-color': '#5d3ebc',
        'secondary-brand-color': '#7849f7'
      }),
      gradientColorStops: theme =>({
        'brand-color': '#4c3398',
        'primary-brand-color': '#5d3ebc',
        'secondary-brand-color': '#7849f7'
      }),
    },
  },
  variants: {
    extend: {}
  },
  plugins: [],
}