Etiket: Tailwind height

tarihinde yayınlandı tarafından — Yorum yapın

Tailwind CSS Sınır Opaklığı

Bu sınıf, tüm özelliklerin sınıf biçiminde kapsandığı arka plan CSS’sinde birçok değeri kabul eder. Border-opacity, elemanın şeffaflığını tanımlayan bir elemanın sınıfıdır. CSS Opacity / Transparency alternatifidir.

Sınır Opaklığı sınıfı:

  • border-opacity-0
  • border-opacity-5
  • border-opacity-10
  • border-opacity-20
  • border-opacity-25
  • border-opacity-30
  • border-opacity-40
  • border-opacity-50
  • border-opacity-60
  • border-opacity-70
  • border-opacity-75
  • border-opacity-80
  • border-opacity-90
  • border-opacity-95
  • border-opacity-100

Söz Dizimi

…

<!DOCTYPE html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
  
    <b>Tailwind CSS Border Opacity Class</b>
      
    <div class="mx-14 bg-green-200 grid grid-rows-4 
                grid-flow-col gap-2 text-justify p-4">
  
        <p class="border-green-800 border-4
                border-opacity-100 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-green-800 border-4
                border-opacity-75 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-green-800 border-4
                border-opacity-50 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-green-800 border-4
                border-opacity-25 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-yellow-800 border-4
                border-opacity-100 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-yellow-800 border-4
                border-opacity-75 p-2">
            A Computer Science Portal for Geeks
        </p>
  
  
        <p class="border-yellow-800 border-4
                border-opacity-50 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-yellow-800 border-4
                border-opacity-25 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-pink-800 border-4
                border-opacity-100 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-pink-800 border-4
                border-opacity-75 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-pink-800 border-4
                border-opacity-50 p-2">
            A Computer Science Portal for Geeks
        </p>
  
        <p class="border-pink-800 border-4
                border-opacity-25 p-2">
            A Computer Science Portal for Geeks
        </p>
    </div>
</body>
  
</html>
Görünüm şekli
tarihinde yayınlandı tarafından — Yorum yapın

Kenarlık Genişliliği – Tailwind CSS

Kenarlıık Genişliği (Tailwind CSS) : Bir öğenin sınırlarını genişliğini denetlemede yardımcı olan araçtır veya koddur.

SınıfÖzellikleri
border-0border-width: 0px;
border-2border-width: 2px;
border-4border-width: 4px;
border-8border-width: 8px;
borderborder-width: 1px;
border-x-0border-left-width: 0px; border-right-width: 0px;
border-x-2border-left-width: 2px; border-right-width: 2px;
border-x-4border-left-width: 4px; border-right-width: 4px;
border-x-8border-left-width: 8px; border-right-width: 8px;
border-xborder-left-width: 1px; border-right-width: 1px;
border-y-0border-top-width: 0px; border-bottom-width: 0px;
border-y-2border-top-width: 2px; border-bottom-width: 2px;
border-y-4border-top-width: 4px; border-bottom-width: 4px;
border-y-8border-top-width: 8px; border-bottom-width: 8px;
border-yborder-top-width: 1px; border-bottom-width: 1px;
border-t-0border-top-width: 0px;
border-t-2border-top-width: 2px;
border-t-4border-top-width: 4px;
border-t-8border-top-width: 8px;
border-tborder-top-width: 1px;
border-r-0border-right-width: 0px;
border-r-2border-right-width: 2px;
border-r-4border-right-width: 4px;
border-r-8border-right-width: 8px;
border-rborder-right-width: 1px;
border-b-0border-bottom-width: 0px;
border-b-2border-bottom-width: 2px;
border-b-4border-bottom-width: 4px;
border-b-8border-bottom-width: 8px;
border-bborder-bottom-width: 1px;
border-l-0border-left-width: 0px;
border-l-2border-left-width: 2px;
border-l-4border-left-width: 4px;
border-l-8border-left-width: 8px;
border-lborder-left-width: 1px;

Temel Kullanım

her açıdan

Kullanılan border, .border-0, .border-2, .border-4, or .border-8 bir öğeye kenarlık belirlemek için kullanılan kod araçları bu şekildedir.

Kenarlık kalınlaklarını tipine göre sıralamar bu şekildedir.
<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

Tek taraflı kalınlık oluşturmak için kodları

Kullanılan kodları şu şekildedir border-{side}, .border-{side}-0, .border-{side}-2, .border-{side}-4, or .border-{side}-8 bir öğede sadece bir tarafta kalınlık oluşturmak için oluşturan kod ve görünüm biçimleri.

Tek taraflı oluşturulan kalınlık örnekleri.
<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

Yatay ve dikey olarak oluşturulan kenarlıklar.

Bir öğenin iki tarafında aynı anda kenarlık genişliği ayarlamak için  border-{x|y}-{width} bu kodu kullanın.

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

Kenar Elemanları Arasında

Ayrıca, bölme-{x/y}-{genişlik} ve bölme-{renk} yardımcı programlarını kullanarak alt öğeler arasına kenarlıklar da ekleyebilirsiniz.

<div class="divide-y divide-slate-200 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Genişlik renk bölümleri için başka bir kaynak için (ingilizce) Kenarlık – Renk