React ile Tailwind CSS kullanırken farklı yöntemler ve kullanım senaryoları vardır. Tailwind CSS’in utility-first yapısı sayesinde, bileşenlere doğrudan sınıflar ekleyebilir, koşullu stiller uygulayabilir ve dinamik sınıflar oluşturabilirsiniz. İşte React ve Tailwind CSS ile çeşitli kullanım yolları:
1. Statik Tailwind Sınıflarını Kullanmak
En basit ve doğrudan yol, bileşenlerde doğrudan Tailwind sınıflarını kullanmaktır. Bu, sabit bir stil gerektiğinde işe yarar.
|
1 2 3 4 5 6 7 |
function Button() { return ( <button className="bg-blue-500 text-white px-4 py-2 rounded"> Click Me </button> ); } |
2. Koşullu Tailwind Sınıfları (Conditional Classes)
Tailwind CSS sınıflarını, bileşenin durumu veya props değerine göre dinamik olarak değiştirebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React, { useState } from 'react'; function ConditionalButton() { const [isActive, setIsActive] = useState(false); return ( <button onClick={() => setIsActive(!isActive)} className={`px-4 py-2 rounded ${ isActive ? 'bg-green-500 text-white' : 'bg-gray-300 text-black' }`} > {isActive ? 'Active' : 'Inactive'} </button> ); } |
3. classnames Kütüphanesi ile Koşullu Sınıflar Kullanmak
React projelerinde sınıf adlarını daha temiz bir şekilde yönetmek için classnames kütüphanesi sıklıkla kullanılır. Bu kütüphane, koşullu Tailwind sınıflarını daha okunabilir hale getirir.
|
1 |
npm install classnames |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { useState } from 'react'; import classNames from 'classnames'; function Button() { const [isLoading, setIsLoading] = useState(false); return ( <button onClick={() => setIsLoading(!isLoading)} className={classNames('px-4 py-2 rounded', { 'bg-blue-500 text-white': !isLoading, 'bg-gray-400 text-black': isLoading, })} > {isLoading ? 'Loading...' : 'Submit'} </button> ); } |
4. Props ile Dinamik Sınıf Atama
Bileşenlere props geçirerek Tailwind sınıflarını dinamik olarak belirleyebilirsiniz. Özellikle, renk ve boyut gibi özelleştirmelerde faydalıdır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function Button({ color = 'blue', size = 'md' }) { const colorClass = color === 'blue' ? 'bg-blue-500' : 'bg-red-500'; const sizeClass = size === 'sm' ? 'px-2 py-1' : 'px-4 py-2'; return ( <button className={`${colorClass} ${sizeClass} text-white rounded`}> Custom Button </button> ); } // Kullanım <Button color="red" size="sm" /> |
5. Inline Tailwind Stilleri ile Dinamik Değerler
Tailwind ile tüm stilleri karşılayamıyorsanız veya belirli durumlarda inline stiller eklemek istiyorsanız, style özelliğini kullanarak ek stil verebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function CustomBox({ width, height }) { return ( <div className="bg-blue-200 rounded" style={{ width: `${width}px`, height: `${height}px` }} > Resizable Box </div> ); } // Kullanım <CustomBox width={150} height={150} /> |
6. CSS Modülleri ile Tailwind Sınıflarını Karıştırmak
Eğer proje CSS modülleri kullanıyorsa, Tailwind ve CSS modüllerini birlikte kullanabilirsiniz. Böylece, bazı özel stilleri CSS modülünde tanımlayabilir, Tailwind ile birleştirebilirsiniz.
|
1 2 3 4 5 |
// Button.module.css .button { font-weight: bold; border: 2px solid #000; } |
|
1 2 3 4 5 6 7 8 9 |
import styles from './Button.module.css'; function Button() { return ( <button className={`${styles.button} bg-blue-500 text-white px-4 py-2 rounded`}> Custom Styled Button </button> ); } |
7. Tailwind’in @apply Yönergesi ile Stil Tekrarını Azaltmak
Tailwind CSS’in @apply özelliği ile belirli Tailwind sınıflarını bir CSS dosyasında birleştirebilir ve tekrar kullanabilirsiniz. Bu yöntem, stil tekrarını azaltmak için idealdir.
|
1 2 3 4 |
/* styles.css */ .btn { @apply bg-blue-500 text-white px-4 py-2 rounded; } |
|
1 2 3 4 5 |
import './styles.css'; function Button() { return <button className="btn">Applied Button</button>; } |
8. Tailwind Değişkenleri ile Temel Renk veya Boyutları Özelleştirme
Tailwind CSS’in tailwind.config.js dosyasında özel renkler, boyutlar veya kırılma noktaları ekleyebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: '#1a202c', }, spacing: { '72': '18rem', '84': '21rem', }, }, }, }; |
|
1 2 3 4 5 6 7 |
function CustomComponent() { return ( <div className="bg-primary p-72 text-white"> Customized Tailwind Component </div> ); } |
9. Tailwind CSS ile Animasyonlar Kullanmak
Tailwind, basit animasyonlar ve geçişler için sınıflar sağlar. transition, duration, ease gibi Tailwind özelliklerini React ile kullanarak animasyon oluşturabilirsiniz.
|
1 2 3 4 5 6 7 |
function AnimatedButton() { return ( <button className="bg-blue-500 text-white px-4 py-2 rounded transition duration-300 ease-in-out transform hover:bg-blue-600 hover:scale-105"> Hover me </button> ); } |
10. Tailwind ile Dark Mode Desteği Eklemek
Tailwind, dark mode desteğini de sağlar. tailwind.config.js içinde darkMode özelliğini class olarak ayarlayarak temalar arasında geçiş yapabilirsiniz.
|
1 2 3 4 |
// tailwind.config.js module.exports = { darkMode: 'class', // veya 'media' (kullanıcı cihazına göre) }; |
|
1 2 3 4 5 6 7 |
function DarkModeComponent() { return ( <div className="bg-white dark:bg-gray-800 p-4"> <p className="text-black dark:text-white">Dark Mode Text</p> </div> ); } |
11. Tailwind CSS ile Breakpointlere Göre Stiller
Tailwind’in sm, md, lg, xl, ve 2xl gibi breakpoint sınıfları sayesinde, ekran genişliğine göre bileşenleri şekillendirebilirsiniz.
|
1 2 3 4 5 6 7 |
function ResponsiveComponent() { return ( <div className="p-4 bg-blue-500 sm:bg-green-500 md:bg-red-500 lg:bg-purple-500"> Responsive Box </div> ); } |
Bu yöntemlerle, React bileşenlerinde Tailwind CSS’i esnek ve güçlü bir şekilde kullanabilirsiniz.
İlk Yorumu Siz Yapın