Kurulum Aşaması

Tailwind.CSS kurulum aşaması npm ve node.js ile bu adımlar uygulandı.

npm install -D tailwindcss
npx tailwindcss init
src adında klasör oluşturuldu (bu klasör ismi size göre değişebilir)
Ben kendim özel klasör ismi oluşturup buna göre oluşturdum.(Aynı ismi kullanmak zorunlu değil) Tailwind Installation Docs

Class yapısı

<header class="w-full bg-teal-400 text-xl font-medium">
    
</header>

Custom Class Added

Bu projede Tailwind.CSS src klasörü (ismi değiştirilebilir) içindeki input.css, .card adlı class özelliğini ekledik.

.card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

Tailwind Docs Kullanılabilirlik

Tailwind.CSS framework'te kullanılan class isimleri bulma kolaylığı. CSS özelliklerini aratıp Tailwind.CSS için nasıl kullanılması gerektiğini gösteriyor. Aradığınız özelliği bulmak zor değil.

Özel Stil Verme ve Ekleme

tailwind.config.js dosyasına kendimiz eklediğmiz özel css class stiller ve kullanımı.

Bkz : https://tailwindcss.com/docs/adding-custom-styles

module.exports = {
  content: ["./public/*.{html,js}"],
  theme: {
    extend: {
      colors:{
        'button-colors-text':"#007bff",
        'link-colors':"#343a40",
      }
    },
  },
  plugins: [],
}

Örnek Kullanım

<li class="p-2 text-link-colors"><a href="#">Features</a></li>

<!-- tailwind.config.js adlı dosyaya kendimiz özel yazı rengi kullanmak istediğimiz class ismi ve renk kodunu oluşturduk. Bunu kullanırken sorun yaşamadık. -->

Responsive Mobile First Yaklaşımı

320px için sorun yaşadım. Kendimiz yeni çözünürlük ekleyerek çözebiliyoruz. Bu durum bootstrap kıyasla can sıkıcı. 😟

MelihKrts / Medium_Tailwind_Blog_Text_Example