Tailwind CSS தரவுப் பண்புக்கூறுகள்: நிலை-அடிப்படையிலான ஸ்டைலிங்கை வெளிக்கொணர்தல்

Tailwind CSS என்பது ஒரு யூட்டிலிட்டி-ஃபர்ஸ்ட் CSS கட்டமைப்பாகும், இது டெவலப்பர்களுக்கு தனிப்பயன் பயனர் இடைமுகங்களை விரைவாக உருவாக்க உதவுகிறது. இது பெரும்பாலும் கிளாஸ்-அடிப்படையிலான ஸ்டைலிங்குடன் தொடர்புடையதாக இருந்தாலும், டைனமிக் மற்றும் நிலை-அடிப்படையிலான ஸ்டைல்களை உருவாக்க Tailwind CSS தரவுப் பண்புக்கூறுகளின் ஆற்றலையும் பயன்படுத்திக் கொள்ள முடியும். இந்த அணுகுமுறை, CSS கிளாஸ்களின் ஜாவாஸ்கிரிப்ட் கையாளுதலில் அதிகம் தங்கியிருக்காமல், UI மாற்றங்களை நிர்வகிக்க ஒரு சுத்தமான மற்றும் திறமையான வழியை வழங்குகிறது.

தரவுப் பண்புக்கூறுகள் என்றால் என்ன?

தரவுப் பண்புக்கூறுகள் என்பவை எந்த HTML உறுப்பிற்கும் சேர்க்கக்கூடிய தனிப்பயன் பண்புக்கூறுகள் ஆகும். அவை தன்னிச்சையான தரவை நேரடியாக HTML க்குள் சேமிக்க உங்களை அனுமதிக்கின்றன. தரவுப் பண்புக்கூறுகள் data- உடன் தொடங்குகின்றன, அதைத் தொடர்ந்து பண்புக்கூறின் பெயர் வரும். எடுத்துக்காட்டாக, data-theme="dark" அல்லது data-state="active". இந்த பண்புக்கூறுகளை ஜாவாஸ்கிரிப்ட் பயன்படுத்தி அணுகலாம் மற்றும் கையாளலாம், ஆனால், Tailwind-க்கு முக்கியமாக, அவற்றை பண்புக்கூறு தேர்வாளர்களைப் பயன்படுத்தி உங்கள் CSS-ல் நேரடியாக இலக்கு வைக்கலாம்.

எடுத்துக்காட்டு:


<button data-theme="dark" class="bg-gray-200 hover:bg-gray-300 py-2 px-4 rounded">டார்க் மோடு</button>

Tailwind CSS உடன் தரவுப் பண்புக்கூறுகளை ஏன் பயன்படுத்த வேண்டும்?

Tailwind CSS உடன் தரவுப் பண்புக்கூறுகளைப் பயன்படுத்துவது பல நன்மைகளை வழங்குகிறது:

கவலைகளின் தெளிவான பிரிப்பு: தரவுப் பண்புக்கூறுகள் தரவு மற்றும் ஸ்டைலிங் தர்க்கத்தை தனித்தனியாக வைத்திருக்கின்றன. HTML தரவை வரையறுக்கிறது, மற்றும் CSS அந்த தரவின் அடிப்படையில் தோற்றத்தைக் கையாளுகிறது.
எளிமைப்படுத்தப்பட்ட நிலை மேலாண்மை: நீங்கள் வெவ்வேறு நிலைகளை (எ.கா., active, disabled, loading) உங்கள் HTML-ல் நேரடியாக எளிதாக நிர்வகிக்கலாம் மற்றும் அதற்கேற்ப ஸ்டைல் செய்யலாம்.
குறைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் சார்பு: தரவுப் பண்புக்கூறுகள் மற்றும் CSS தேர்வாளர்களைப் பயன்படுத்துவதன் மூலம், பயனர் தொடர்புகள் அல்லது பயன்பாட்டு நிலையின் அடிப்படையில் ஸ்டைல்களைப் புதுப்பிக்கத் தேவையான ஜாவாஸ்கிரிப்ட் குறியீட்டின் அளவைக் குறைக்கலாம்.
மேம்படுத்தப்பட்ட வாசிப்புத்திறன்: தரவுப் பண்புக்கூறுகள் பயன்படுத்தப்படும்போது ஸ்டைலிங்கின் நோக்கம் பெரும்பாலும் தெளிவாகிறது, இது குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்குகிறது.

தரவுப் பண்புக்கூறுகளுடன் நிலை-அடிப்படையிலான ஸ்டைலிங்கை எவ்வாறு செயல்படுத்துவது

முக்கிய கருத்து இதில் அடங்கும்:

HTML உறுப்புகளுக்கு தரவுப் பண்புக்கூறுகளைச் சேர்த்தல்: நீங்கள் ஸ்டைல் செய்ய விரும்பும் HTML உறுப்புகளுக்கு தொடர்புடைய தரவுப் பண்புக்கூறுகளை ஒதுக்குங்கள்.
Tailwind CSS-ல் பண்புக்கூறு தேர்வாளர்களைப் பயன்படுத்துதல்: CSS பண்புக்கூறு தேர்வாளர்களைப் பயன்படுத்தி அவற்றின் தரவுப் பண்புக்கூறு மதிப்புகளின் அடிப்படையில் உறுப்புகளை இலக்கு வையுங்கள்.
தரவுப் பண்புக்கூறுகளைப் புதுப்பித்தல் (தேவைப்பட்டால்): ஸ்டைல் மாற்றங்களைத் தூண்டுவதற்கு தரவுப் பண்புக்கூறு மதிப்புகளை டைனமிக்காக புதுப்பிக்க ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தவும்.

நிலை-அடிப்படையிலான ஸ்டைலிங்கின் எடுத்துக்காட்டுகள்

1. தீம் மாற்றுதல் (லைட்/டார்க் மோடு)

தரவுப் பண்புக்கூறுகளைப் பயன்படுத்தி ஒரு எளிய லைட்/டார்க் மோடு சுவிட்சை உருவாக்குவோம்.

HTML:


<div data-theme="light" class="bg-white text-gray-800 dark:bg-gray-800 dark:text-white p-4">
  <p>இது சில உள்ளடக்கம்.</p>
  <button id="theme-toggle" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">தீமை மாற்று</button>
</div>

ஜாவாஸ்கிரிப்ட்:


const themeToggle = document.getElementById('theme-toggle');
const container = document.querySelector('[data-theme]');

themeToggle.addEventListener('click', () => {
  const currentTheme = container.dataset.theme;
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  container.dataset.theme = newTheme;
  // Update Tailwind classes directly for immediate effect
  if (newTheme === 'dark') {
      container.classList.add('bg-gray-800', 'text-white');
      container.classList.remove('bg-white', 'text-gray-800');
  } else {
      container.classList.add('bg-white', 'text-gray-800');
      container.classList.remove('bg-gray-800', 'text-white');
  }
});

விளக்கம்:

<div> உறுப்புக்கு data-theme என்ற பண்புக்கூறு உள்ளது, இது ஆரம்பத்தில் "light" என அமைக்கப்பட்டுள்ளது.
ஜாவாஸ்கிரிப்ட் data-theme பண்புக்கூறின் மதிப்பை "light" மற்றும் "dark" இடையே மாற்றுகிறது.
Tailwind CSS-ல் உள்ள `dark:` முன்னொட்டு, data-theme ஆனது `dark` என அமைக்கப்படும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது. குறிப்பு: இது Tailwind-ன் டார்க் மோடு உத்தி மற்றும் உங்கள் `tailwind.config.js` கோப்பில் உள்ள பொருத்தமான உள்ளமைவைப் பொறுத்தது.
கன்டெய்னரில் உள்ள கிளாஸ்களை மாற்றுவதற்கு கூடுதல் JS-ஐ சேர்க்கிறோம், இதன் மூலம் மாற்றம் உடனடியாக நிகழ்கிறது, jit வேலை செய்யும் வரை காத்திருக்க வேண்டியதில்லை.

2. அக்கார்டியன் கூறு

ஒரு தலைப்பைக் கிளிக் செய்வதன் மூலம் உள்ளடக்கம் விரியும் அல்லது சுருங்கும் ஒரு எளிய அக்கார்டியன் கூறுகளை உருவாக்குவோம். விரிந்த நிலையைக் கண்காணிக்க தரவுப் பண்புக்கூறுகளைப் பயன்படுத்துவோம்.

HTML:


<div class="accordion">
  <div class="accordion-item" data-expanded="false">
    <button class="accordion-header bg-gray-100 hover:bg-gray-200 py-2 px-4 w-full text-left font-bold">
      பிரிவு 1
    </button>
    <div class="accordion-content p-4 hidden">
      <p>பிரிவு 1 க்கான உள்ளடக்கம்.</p>
    </div>
  </div>
  <div class="accordion-item" data-expanded="false">
    <button class="accordion-header bg-gray-100 hover:bg-gray-200 py-2 px-4 w-full text-left font-bold">
      பிரிவு 2
    </button>
    <div class="accordion-content p-4 hidden">
      <p>பிரிவு 2 க்கான உள்ளடக்கம்.</p>
    </div>
  </div>
</div>

ஜாவாஸ்கிரிப்ட்:


const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const item = header.parentNode;
    const content = header.nextElementSibling;
    const isExpanded = item.dataset.expanded === 'true';

    item.dataset.expanded = !isExpanded;

    if (!isExpanded) {
      content.classList.remove('hidden');
    } else {
      content.classList.add('hidden');
    }
  });
});

CSS (Tailwind-ன் `@apply` டைரக்டிவ் அல்லது ஒரு தனி CSS கோப்பில் பயன்படுத்துதல்):


/* இந்த எடுத்துக்காட்டு வழக்கமான CSS-ஐப் பயன்படுத்துகிறது, ஏனெனில் Tailwind-ன் தரவுப் பண்புக்கூறு ஆதரவு வேரியண்ட்களுக்கு மட்டுமே வரையறுக்கப்பட்டுள்ளது */
.accordion-item[data-expanded="true"] .accordion-content {
  display: block;
}

விளக்கம்:

ஒவ்வொரு அக்கார்டியன் உருப்படியும் data-expanded என்ற பண்புக்கூறைக் கொண்டுள்ளது, இது "false" என ஆரம்பிக்கப்பட்டுள்ளது.
தலைப்பைக் கிளிக் செய்யும் போது ஜாவாஸ்கிரிப்ட் data-expanded பண்புக்கூறின் மதிப்பை மாற்றுகிறது.
data-expanded ஆனது "true" என அமைக்கப்படும்போது உள்ளடக்கத்தைக் காட்ட CSS ஒரு பண்புக்கூறு தேர்வாளரைப் பயன்படுத்துகிறது.

குறிப்பு: Tailwind CSS-ன் உள்ளமைக்கப்பட்ட வேரியண்ட் சிஸ்டம் தன்னிச்சையான தரவுப் பண்புக்கூறுகளை நேரடியாக ஆதரிக்காது. மேலே உள்ள எடுத்துக்காட்டு பண்புக்கூறு தேர்வாளருக்கு வழக்கமான CSS-ஐப் பயன்படுத்துகிறது, இதை `@apply` டைரக்டிவ் அல்லது ஒரு தனி CSS கோப்பில் Tailwind கிளாஸ்களுடன் இணைக்கலாம்.

3. படிவ சரிபார்ப்பு

படிவ புலங்களின் சரிபார்ப்பு நிலையைக் குறிக்க தரவுப் பண்புக்கூறுகளைப் பயன்படுத்தலாம்.

HTML:


<input type="email" data-valid="false" class="border p-2" placeholder="உங்கள் மின்னஞ்சலை உள்ளிடவும்">

CSS (Tailwind-ன் `@apply` டைரக்டிவ் அல்லது ஒரு தனி CSS கோப்பில் பயன்படுத்துதல்):


input[data-valid="false"] {
  border-color: red;
}

input[data-valid="true"] {
  border-color: green;
}

ஜாவாஸ்கிரிப்ட் (எடுத்துக்காட்டு):


const emailInput = document.querySelector('input[type="email"]');

emailInput.addEventListener('input', () => {
  const isValid = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(emailInput.value);
  emailInput.dataset.valid = isValid;
});

4. சர்வதேச எடுத்துக்காட்டு: மொழித் தேர்வு

பல மொழிகளில் உள்ளடக்கத்தை வழங்கும் ஒரு வலைத்தளத்தை கற்பனை செய்து பாருங்கள். தற்போது தேர்ந்தெடுக்கப்பட்ட மொழியைக் குறிக்க தரவுப் பண்புக்கூறுகளைப் பயன்படுத்தலாம்.

HTML:


<body data-language="en">
  <h1>ஹலோ, வேர்ல்ட்!</h1> <!-- ஆங்கிலம் -->
  <h1 data-language="es" class="hidden">¡Hola Mundo!</h1> <!-- ஸ்பானிஷ் -->
  <button id="language-switch">ஸ்பானிஷுக்கு மாற்றவும்</button>
</body>

ஜாவாஸ்கிரிப்ட்:


const languageSwitch = document.getElementById('language-switch');
const body = document.querySelector('body');
const englishHeading = document.querySelector('h1:not([data-language])');
const spanishHeading = document.querySelector('h1[data-language="es"]');

languageSwitch.addEventListener('click', () => {
  const currentLanguage = body.dataset.language;
  if (currentLanguage === 'en') {
    body.dataset.language = 'es';
    englishHeading.classList.add('hidden');
    spanishHeading.classList.remove('hidden');
  } else {
    body.dataset.language = 'en';
    englishHeading.classList.remove('hidden');
    spanishHeading.classList.add('hidden');
  }
});

இந்த எடுத்துக்காட்டு தரவுப் பண்புக்கூறுகள் மற்றும் ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தி வெவ்வேறு மொழி பதிப்புகளுக்கு இடையில் எவ்வாறு மாறுவது என்பதைக் காட்டுகிறது. இந்த வழக்கில், CSS ஆனது Tailwind CSS-ன் `hidden` கிளாஸைச் சேர்ப்பதன் மூலமோ அல்லது அகற்றுவதன் மூலமோ நிர்வகிக்கப்படுகிறது.

வரம்புகள் மற்றும் கருத்தாய்வுகள்

Tailwind வேரியண்ட் வரம்புகள்: முன்னர் குறிப்பிட்டபடி, Tailwind-ன் உள்ளமைக்கப்பட்ட வேரியண்ட் சிஸ்டம் தன்னிச்சையான தரவுப் பண்புக்கூறுகளுக்கு வரையறுக்கப்பட்ட ஆதரவையே கொண்டுள்ளது. மிகவும் சிக்கலான சூழ்நிலைகளுக்கு நீங்கள் வழக்கமான CSS (`@apply` உடன்) அல்லது செருகுநிரல்களைப் பயன்படுத்த வேண்டியிருக்கலாம். Tailwind JIT மோடு உங்கள் CSS மற்றும் HTML-ஐ பகுப்பாய்வு செய்து தேவையான ஸ்டைல்களை உள்ளடக்கும்.
குறிப்புத்தன்மை: தரவுப் பண்புக்கூறு தேர்வாளர்களுக்கு ஒரு குறிப்பிட்ட அளவு CSS குறிப்புத்தன்மை உள்ளது. இது மற்ற CSS விதிகளுடன் எவ்வாறு தொடர்பு கொள்ளக்கூடும் என்பதில் கவனமாக இருங்கள்.
ஜாவாஸ்கிரிப்ட் சார்பு (சில நேரங்களில்): ஜாவாஸ்கிரிப்ட்டைக் குறைப்பதே நோக்கமாக இருந்தாலும், பயனர் தொடர்புகள் அல்லது பயன்பாட்டு நிலையின் அடிப்படையில் தரவுப் பண்புக்கூறுகளைப் புதுப்பிக்க உங்களுக்கு இன்னும் சில ஜாவாஸ்கிரிப்ட் தேவைப்படும்.
செயல்திறன்: சிக்கலான பண்புக்கூறு தேர்வாளர்களின் அதிகப்படியான பயன்பாடு செயல்திறனை பாதிக்கக்கூடும், குறிப்பாக பழைய உலாவிகளில். முழுமையாக சோதிக்கவும்.

சிறந்த நடைமுறைகள்

விளக்கமான பண்புக்கூறு பெயர்களைப் பயன்படுத்தவும்: குறியீட்டின் வாசிப்புத்திறனை மேம்படுத்த தெளிவான மற்றும் அர்த்தமுள்ள தரவுப் பண்புக்கூறு பெயர்களைத் தேர்ந்தெடுக்கவும் (எ.கா., data-ld க்கு பதிலாக data-is-loading).
மதிப்புகளை எளிமையாக வைத்திருங்கள்: தரவுப் பண்புக்கூறுகளுக்கு எளிய சரம் அல்லது பூலியன் மதிப்புகளைப் பயன்படுத்தவும். சிக்கலான தரவு கட்டமைப்புகளை நேரடியாக HTML-ல் சேமிப்பதைத் தவிர்க்கவும்.
அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: உங்கள் தரவுப் பண்புக்கூறுகளின் பயன்பாடு அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். ஜாவாஸ்கிரிப்டுடன் தொடர்பு கொள்ள முடியாத பயனர்களுக்கு மாற்று வழிமுறைகளை வழங்கவும்.
முழுமையாக சோதிக்கவும்: சீரான நடத்தையை உறுதிப்படுத்த உங்கள் நிலை-அடிப்படையிலான ஸ்டைலிங்கை வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும்.

முடிவுரை

தரவுப் பண்புக்கூறுகள் Tailwind CSS உடன் நிலை-அடிப்படையிலான ஸ்டைலிங்கை செயல்படுத்த ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகின்றன. தரவுப் பண்புக்கூறுகள் மற்றும் CSS பண்புக்கூறு தேர்வாளர்களைப் பயன்படுத்துவதன் மூலம், குறைந்த ஜாவாஸ்கிரிப்ட் குறியீட்டுடன் டைனமிக் மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்கலாம், இது சுத்தமான, மேலும் பராமரிக்கக்கூடிய குறியீட்டுத் தளங்களுக்கு வழிவகுக்கிறது. குறிப்பாக Tailwind-ன் வேரியண்ட் சிஸ்டம் தொடர்பான வரம்புகளைக் கருத்தில் கொள்ள வேண்டியிருந்தாலும், இந்த அணுகுமுறையின் நன்மைகள் குறிப்பிடத்தக்கவையாக இருக்கலாம், குறிப்பாக சிக்கலான UI தொடர்புகள் தேவைப்படும் திட்டங்களுக்கு.

தரவுப் பண்புக்கூறுகளை சிந்தனையுடன் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் மேலும் சொற்பொருள் சார்ந்த, செயல்திறன் மிக்க மற்றும் எளிதில் பராமரிக்கக்கூடிய CSS கட்டமைப்பை உருவாக்க முடியும். உலகளாவிய டெவலப்பர்கள் Tailwind உடன் யூட்டிலிட்டி-ஃபர்ஸ்ட் CSS-ன் நன்மைகளைத் தொடர்ந்து ஆராய்ந்து வருவதால், தரவுப் பண்புக்கூறுகளின் சிறந்த பயன்பாட்டு நிகழ்வுகளைக் கண்காணிப்பது சந்தேகத்திற்கு இடமின்றி மேலும் மேம்பட்ட மற்றும் செம்மையான பயனர் அனுபவங்களை செயல்படுத்தும்.

உங்கள் செயலாக்கங்களை வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் எப்போதும் சோதித்து, எல்லா இடங்களிலும் சீரான நடத்தை மற்றும் உகந்த பயனர் அனுபவத்திற்கு உத்தரவாதம் அளிக்க நினைவில் கொள்ளுங்கள்.

இந்த அணுகுமுறை இடம், கலாச்சாரம் அல்லது மொழி ஆகியவற்றைப் பொருட்படுத்தாமல் உலகளவில் பொருந்தும். தரவுப் பண்புக்கூறுகள் வலை மேம்பாட்டிற்கான ஒரு உலகளாவிய கருவியாகும், மேலும் Tailwind CSS உடன் அவற்றின் கலவையானது ஊடாடும் மற்றும் டைனமிக் பயனர் இடைமுகங்களை உருவாக்குவதற்கான அற்புதமான சாத்தியங்களைத் திறக்கிறது.