v2.5.1
Giriş yap

React-Getir Klonu Tailwind css

onurbakkaloglu
62 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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: [],
}

Cevap yaz
Cevaplar (1)
hakankorkz
41 gün önce

Ders kaynağını indirip kontrol ettiniz mi? acaba bir de reis sende öneride bulunuyor mu? kod editörün tailwindcss kodlarının...