டெயில்விண்ட் CSS ஆர்பிட்ரரி ப்ராப்பர்டீஸ்: CSS-in-Utility-க்கான முழுமையான வழிகாட்டி

டெயில்விண்ட் CSS ஃப்ரண்ட்-எண்ட் டெவலப்மெண்ட் அணுகுமுறையில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது. அதன் யூட்டிலிட்டி-ஃபர்ஸ்ட் வழிமுறை, மார்க்கப்பில் நேரடியாக இன்டர்ஃபேஸ்களை உருவாக்குவதன் மூலம் விரைவான ப்ரோட்டோடைப்பிங், சீரான வடிவமைப்பு அமைப்புகள் மற்றும் எளிதில் பராமரிக்கக்கூடிய கோட்பேஸ்களை அனுமதிக்கிறது. இருப்பினும், மிகவும் விரிவான யூட்டிலிட்டி லைப்ரரியால் கூட சாத்தியமான ஒவ்வொரு வடிவமைப்பு தேவையையும் கணிக்க முடியாது. உங்களுக்கு margin-top: 13px போன்ற ஒரு குறிப்பிட்ட மதிப்பு அல்லது ஒரு டிசைனர் வழங்கிய தனித்துவமான clip-path தேவைப்படும்போது என்ன செய்வது? நீங்கள் யூட்டிலிட்டி-ஃபர்ஸ்ட் வேலை முறையைக் கைவிட்டு, ஒரு தனி CSS கோப்பிற்குத் திரும்ப வேண்டுமா?

வரலாற்று ரீதியாக, இது ஒரு நியாயமான கவலையாக இருந்தது. ஆனால் ஜஸ்ட்-இன்-டைம் (JIT) கம்பைலரின் வருகையுடன், டெயில்விண்ட் ஒரு கேம்-சேஞ்சிங் அம்சத்தை அறிமுகப்படுத்தியது: ஆர்பிட்ரரி ப்ராப்பர்டீஸ் (arbitrary properties). இந்த சக்திவாய்ந்த அம்சம் ஒரு தடையற்ற வழியை வழங்குகிறது, இது உங்களுக்குத் தேவையான எந்த CSS மதிப்பையும் உங்கள் கிளாஸ் லிஸ்ட்டில் நேரடியாகப் பயன்படுத்த அனுமதிக்கிறது. இது ஒரு முறையான யூட்டிலிட்டி கட்டமைப்பின் மற்றும் ரா CSS-இன் எல்லையற்ற நெகிழ்வுத்தன்மையின் சரியான கலவையாகும்.

இந்த விரிவான வழிகாட்டி உங்களை ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களின் உலகிற்குள் ஆழமாக அழைத்துச் செல்லும். அவை என்ன, ஏன் அவை மிகவும் சக்திவாய்ந்தவை, மற்றும் உங்கள் HTML-ஐ விட்டு வெளியேறாமல் நீங்கள் கற்பனை செய்யக்கூடிய எதையும் உருவாக்க அவற்றை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதை நாம் ஆராய்வோம்.

டெயில்விண்ட் CSS ஆர்பிட்ரரி ப்ராப்பர்டீஸ் என்றால் என்ன?

சுருக்கமாகச் சொன்னால், ஆர்பிட்ரரி ப்ராப்பர்டீஸ் என்பது டெயில்விண்ட் CSS-இல் உள்ள ஒரு சிறப்பு சிண்டாக்ஸ் ஆகும், இது ஒரு கஸ்டம் மதிப்புடன் ஒரு யூட்டிலிட்டி கிளாஸை உடனடியாக உருவாக்க உங்களை அனுமதிக்கிறது. உங்கள் tailwind.config.js கோப்பில் முன் வரையறுக்கப்பட்ட மதிப்புகளுக்கு (உதாரணமாக, p-4 என்பது padding: 1rem) மட்டுப்படுத்தப்படாமல், உங்களுக்குத் தேவையான சரியான CSS-ஐ நீங்கள் குறிப்பிடலாம்.

இதன் சிண்டாக்ஸ் எளிமையானது மற்றும் சதுர அடைப்புக்குறிக்குள் இணைக்கப்பட்டுள்ளது:

[property:value]

ஒரு கிளாசிக் உதாரணத்தைப் பார்ப்போம். ஒரு எலிமெண்ட்டை மேலிருந்து சரியாக 117 பிக்சல்கள் தொலைவில் நிலைநிறுத்த வேண்டும் என்று கற்பனை செய்து கொள்ளுங்கள். டெயில்விண்ட்டின் இயல்புநிலை ஸ்பேசிங் ஸ்கேலில் '117px'-க்கான யூட்டிலிட்டி இருக்க வாய்ப்பில்லை. ஒரு கஸ்டம் கிளாஸை உருவாக்குவதற்குப் பதிலாக, நீங்கள் வெறுமனே எழுதலாம்:

<div class="absolute top-[117px] ...">...</div>

திரைக்குப் பின்னால், டெயில்விண்டின் JIT கம்பைலர் இதைப் பார்த்து, மில்லி விநாடிகளில், உங்களுக்கான தொடர்புடைய CSS கிளாஸை உருவாக்குகிறது:

.top-\[117px\] {
  top: 117px;
}

இந்த எளிமையான ஆனால் ஆழமான அம்சம், முழுமையான யூட்டிலிட்டி-டிரைவன் வேலை முறைக்கான இறுதித் தடையை திறம்பட நீக்குகிறது. உங்கள் குளோபல் தீமில் சேராத ஒருமுறை மட்டுமே பயன்படுத்தப்படும் ஸ்டைல்களுக்கு இது ஒரு உடனடி, இன்லைன் தீர்வை வழங்குகிறது, நீங்கள் வேலையின் ஓட்டத்தில் இருந்து, வேகத்தை பராமரிக்க முடியும் என்பதை உறுதி செய்கிறது.

ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களை ஏன், எப்போது பயன்படுத்த வேண்டும்

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

ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களுக்கான சிறந்த பயன்பாட்டு வழக்குகள்

• ஒருமுறை மட்டுமே பயன்படுத்தப்படும் ஸ்டைல்கள் (One-Off Styles): இது முதன்மையான மற்றும் மிகவும் பொதுவான பயன்பாட்டு வழக்கு. ஒரு ஸ்டைல் ஒரு தனிப்பட்ட எலிமெண்ட்டிற்கு மட்டுமே உரியதாகவும், மீண்டும் பயன்படுத்தப்பட வாய்ப்பில்லாததாகவும் இருக்கும்போது, ஒரு ஆர்பிட்ரரி ப்ராப்பர்ட்டி சரியான தீர்வாகும். தற்காலிக மோடலுக்கான ஒரு குறிப்பிட்ட z-index, ஒரு அலங்கார எலிமெண்ட்டிற்கான பிக்சல்-சரியான நிலை, அல்லது ஒரு ஹீரோ பகுதிக்கான கஸ்டம் கிரேடியன்ட் ஆகியவை இதற்கான உதாரணங்கள்.
• ப்ரோட்டோடைப்பிங் மற்றும் பரிசோதனை: நீங்கள் டெவலப்மெண்ட்டின் கிரியேட்டிவ் கட்டத்தில் இருக்கும்போது, மதிப்புகளை விரைவாக பரிசோதிக்க வேண்டும். ஆர்பிட்ரரி ப்ராப்பர்டீஸ் ஒரு நம்பமுடியாத ஃபீட்பேக் லூப்பை வழங்குகிறது. நீங்கள் ஒரு அகலம், ஒரு நிறம், அல்லது ஒரு ட்ரான்ஸ்ஃபார்ம் மதிப்பை நேரடியாக பிரவுசரின் டெவலப்பர் டூல்ஸில் மாற்றி, ஒரு கான்பிக் கோப்பை மீண்டும் மீண்டும் கம்பைல் செய்யாமலோ அல்லது எடிட் செய்யாமலோ உடனடியாக முடிவுகளைப் பார்க்கலாம்.
• டைனமிக் டேட்டாவுடன் வேலை செய்தல்: மதிப்புகள் ஒரு பேக்எண்ட் சிஸ்டம், ஒரு CMS, அல்லது பயனர் உள்ளீட்டிலிருந்து வரும்போது, ஆர்பிட்ரரி ப்ராப்பர்டீஸ் இன்றியமையாதவை. உதாரணமாக, கணக்கிடப்பட்ட சதவீதத்தின் அடிப்படையில் ஒரு ப்ரோக்ரஸ் பாரை ரெண்டர் செய்வது மிகவும் எளிது.
  <div class="h-2 bg-blue-500 w-[{{ progressPercentage }}%]'></div>
• நவீன அல்லது முக்கியமில்லாத CSS ப்ராப்பர்டீஸ்களைப் பயன்படுத்துதல்: CSS உலகம் தொடர்ந்து வளர்ந்து வருகிறது. டெயில்விண்ட்டில் இன்னும் பிரத்யேக யூட்டிலிட்டிகள் இல்லாத புதிய அல்லது சோதனை ரீதியான ப்ராப்பர்டீஸ்கள் இருக்கலாம். ஆர்பிட்ரரி ப்ராப்பர்டீஸ் உங்களுக்கு scroll-snap-type, container-type, அல்லது மேம்பட்ட mask-image விளைவுகள் போன்ற முழு CSS மொழிக்கும் உடனடி அணுகலை வழங்குகின்றன.

ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களை எப்போது தவிர்க்க வேண்டும்

சக்திவாய்ந்ததாக இருந்தாலும், ஆர்பிட்ரரி ப்ராப்பர்டீஸ் உங்கள் வடிவமைப்பு அமைப்பை மாற்றக்கூடாது. டெயில்விண்ட்டின் முக்கிய பலம் உங்கள் tailwind.config.js கோப்பால் வழங்கப்படும் நிலைத்தன்மையில்தான் உள்ளது.

• மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளுக்கு: நீங்கள் பல இடங்களில் text-[#1A2B3C] அல்லது p-[13px] என்று எழுதுவதைக் கண்டால், இந்த மதிப்பு உங்கள் தீமின் ஒரு பகுதியாக இருக்க வேண்டும் என்பதற்கான ஒரு வலுவான அறிகுறியாகும். இது சிஸ்டம்-டிரைவன் டிசைனின் ஒரு அடிப்படைக் கொள்கையாகும். ஆர்பிட்ரரி மதிப்பை மீண்டும் மீண்டும் பயன்படுத்துவதற்குப் பதிலாக, அதை உங்கள் கான்பிகரேஷன் கோப்பில் சேர்க்கவும்.

உதாரணமாக, #1A2B3C என்பது உங்கள் முதன்மை பிராண்ட் நிறம் என்றால், அதை உங்கள் தீமில் சேர்க்கவும்:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-dark-blue': '#1A2B3C',
      },
    },
  },
}

இப்போது, நீங்கள் உங்கள் ப்ராஜெக்ட் முழுவதும் மிகவும் அர்த்தமுள்ள மற்றும் மீண்டும் பயன்படுத்தக்கூடிய text-brand-dark-blue கிளாஸைப் பயன்படுத்தலாம்.

• கோர் டிசைன் சிஸ்டம் எலிமெண்ட்களுக்கு: உங்கள் அப்ளிகேஷனின் கோர் ஸ்பேசிங், டைப்போகிராபி ஸ்கேல், மற்றும் கலர் பேலட் எப்போதும் உங்கள் தீமில் இருக்க வேண்டும். இது நிலைத்தன்மையை அமல்படுத்துகிறது, குளோபல் மாற்றங்களை எளிதாக்குகிறது, மற்றும் உங்கள் UI உங்கள் பிராண்ட் வழிகாட்டுதல்களுக்கு இணங்குவதை உறுதி செய்கிறது. ஆர்பிட்ரரி ப்ராப்பர்டீஸ் விதிகளுக்கு அல்ல, விதிவிலக்குகளுக்கு மட்டுமே.

சிண்டாக்ஸில் தேர்ச்சி பெறுதல்: அடிப்படைகளுக்கு அப்பால்

அடிப்படை [property:value] சிண்டாக்ஸ் ஒரு ஆரம்பம் மட்டுமே. ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களின் திறனை முழுமையாகத் திறக்க, நீங்கள் இன்னும் சில அத்தியாவசியக் கருத்துக்களைப் புரிந்து கொள்ள வேண்டும்.

மதிப்புகளில் உள்ள ஸ்பேஸ்களைக் கையாளுதல்

CSS ப்ராப்பர்ட்டி மதிப்புகளில் பெரும்பாலும் ஸ்பேஸ்கள் இருக்கும், உதாரணமாக, grid-template-columns அல்லது box-shadow. HTML-இல் கிளாஸ் பெயர்களைப் பிரிக்க ஸ்பேஸ்கள் பயன்படுத்தப்படுவதால், ஆர்பிட்ரரி ப்ராப்பர்ட்டிக்குள் அவற்றை நீங்கள் ஒரு அண்டர்ஸ்கோர் (_) எழுத்தால் மாற்ற வேண்டும்.

தவறு (உடைந்துவிடும்): class="[grid-template-columns:1fr 500px 2fr]"

சரி: class="[grid-template-columns:1fr_500px_2fr]"

இது நினைவில் கொள்ள வேண்டிய ஒரு முக்கியமான விதி. JIT கம்பைலர் இறுதி CSS-ஐ உருவாக்கும்போது அண்டர்ஸ்கோர்களை மீண்டும் ஸ்பேஸ்களாக மாற்றிவிடும்.

CSS வேரியபிள்களைப் பயன்படுத்துதல் (கஸ்டம் ப்ராப்பர்டீஸ்)

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

நீங்கள் CSS வேரியபிள்களை வரையறுக்கலாம் மற்றும் பயன்படுத்தலாம்:

• ஒரு வேரியபிளை வரையறுத்தல்: [--variable-name:value] சிண்டாக்ஸைப் பயன்படுத்தவும்.
• ஒரு வேரியபிளைப் பயன்படுத்துதல்: மற்றொரு ஆர்பிட்ரரி ப்ராப்பர்ட்டிக்குள் ஸ்டாண்டர்டு var(--variable-name) CSS ஃபங்ஷனைப் பயன்படுத்தவும்.

ஒரு பேரண்ட்டின் தீம் நிறத்தை மதிக்கும் ஒரு காம்போனென்டை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த உதாரணம் இங்கே:

<!-- பேரண்ட் காம்போனென்ட் தீம் நிறத்தை அமைக்கிறது -->
<div class="[--theme-color:blue]">
  <h3 class="text-[var(--theme-color)]">Themed Title</h3>
  <p>This component will now use blue.</p>
</div>

<!-- வேறுபட்ட தீம் நிறத்துடன் மற்றொரு இன்ஸ்டன்ஸ் -->
<div class="[--theme-color:green]">
  <h3 class="text-[var(--theme-color)]">Themed Title</h3>
  <p>This component will now use green.</p>
</div>

`theme()` உடன் உங்கள் தீமைக் குறிப்பிடுதல்

உங்கள் தற்போதைய தீமின் அடிப்படையில் கணக்கிடப்பட்ட ஒரு கஸ்டம் மதிப்பு உங்களுக்குத் தேவைப்பட்டால் என்ன செய்வது? டெயில்விண்ட் theme() ஃபங்ஷனை வழங்குகிறது, இதை நீங்கள் ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களுக்குள் உங்கள் tailwind.config.js கோப்பிலிருந்து மதிப்புகளைக் குறிப்பிடப் பயன்படுத்தலாம்.

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

<div class="w-[calc(100%_-_theme(spacing.16))]">...</div>

இங்கே, theme(spacing.16) என்பது உங்கள் கான்பிக்கிலிருந்து `spacing[16]`-இன் உண்மையான மதிப்புடன் (எ.கா., `4rem`) மாற்றப்படும், மற்றும் டெயில்விண்ட் width: calc(100% - 4rem)-க்கான ஒரு கிளாஸை உருவாக்கும்.

உலகளாவிய கண்ணோட்டத்தில் இருந்து நடைமுறை உதாரணங்கள்

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

உதாரணம் 1: பிக்சல்-சரியான UI உச்சரிப்புகள்

ஒரு டிசைனர் ஒரு பயனர் சுயவிவர அட்டைக்கான ஒரு மாக்கப்பை உங்களுக்குக் கொடுத்துள்ளார், அதில் அவதாரத்திற்கு ஒரு குறிப்பிட்ட, தரமற்ற பார்டர் ஆஃப்செட் உள்ளது.

<div class="relative w-24 h-24">
  <img src="/path/to/avatar.jpg" alt="User Avatar" class="w-full h-full rounded-full">
  <!-- அலங்கார பார்டர் வளையம் -->
  <div class="absolute rounded-full border-2 border-blue-500 top-[-4px]_left-[-4px]_right-[-4px]_bottom-[-4px]"></div>
</div>

இங்கே, ஒருமுறை மட்டுமே பயன்படுத்தப்படும் ஒரு வழக்கிற்காக .avatar-border-offset போன்ற ஒரு கஸ்டம் CSS கிளாஸை உருவாக்குவதை விட top-[-4px] பயன்படுத்துவது மிகவும் தூய்மையானது மற்றும் நேரடியானது.

உதாரணம் 2: கஸ்டம் கிரிட் லேஅவுட்கள்

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

<div class="grid grid-cols-[1fr_300px] gap-8">
  <main>... Main article content ...</main>
  <aside>... Sidebar with ads or related links ...</aside>
</div>

grid-cols-[1fr_300px] கிளாஸ் ஒரு இரண்டு-நெடுவரிசை கிரிட்டை உருவாக்குகிறது, இதில் முதல் நெடுவரிசை நெகிழ்வானதாகவும், இரண்டாவது 300px-இல் நிலையானதாகவும் இருக்கும்—இது இப்போது செயல்படுத்துவதற்கு மிகவும் எளிதான ஒரு பொதுவான பேட்டர்ன் ஆகும்.

உதாரணம் 3: தனித்துவமான பின்னணி கிரேடியன்ட்கள்

ஒரு புதிய தயாரிப்பு வெளியீட்டிற்கான உங்கள் நிறுவனத்தின் பிராண்டிங்கில், உங்கள் ஸ்டாண்டர்டு தீமின் ஒரு பகுதியாக இல்லாத ஒரு குறிப்பிட்ட இரண்டு-தொனி கிரேடியன்ட் உள்ளது.

<div class="p-10 rounded-lg bg-[linear-gradient(110deg,_#a6e3e9_0%,_#a8eec8_100%)]">
  <h2 class="text-white text-2xl font-bold">New Product Launch!</h2>
</div>

இது ஒருமுறை மட்டுமே பயன்படுத்தப்படும் கிரேடியன்ட் மூலம் உங்கள் தீமைக் கெடுப்பதைத் தவிர்க்கிறது. நீங்கள் அதை தீம் மதிப்புகளுடன் கூட இணைக்கலாம்: bg-[linear-gradient(to_right,theme(colors.blue.500),theme(colors.purple.500))].

உதாரணம் 4: `clip-path` உடன் மேம்பட்ட CSS

ஒரு பட கேலரியை மேலும் டைனமிக்காக மாற்ற, நீங்கள் சிறுபடங்களுக்கு ஒரு செவ்வகமற்ற வடிவத்தைப் பயன்படுத்த விரும்புகிறீர்கள்.

<img src="/path/to/image.jpg" class="[clip-path:polygon(0%_15%,_100%_0%,_100%_85%,_0%_100%)]">

இது எந்த கூடுதல் CSS கோப்புகளோ அல்லது கான்பிகரேஷன்களோ இல்லாமல் clip-path-இன் முழு சக்திக்கும் உடனடி அணுகலை உங்களுக்கு வழங்குகிறது.

ஆர்பிட்ரரி ப்ராப்பர்டீஸ் மற்றும் மாடிஃபையர்கள்

ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களின் மிக நேர்த்தியான அம்சங்களில் ஒன்று, டெயில்விண்டின் சக்திவாய்ந்த மாடிஃபையர் அமைப்புடன் அவற்றின் தடையற்ற ஒருங்கிணைப்பு ஆகும். நீங்கள் ஒரு ஸ்டாண்டர்டு யூட்டிலிட்டி கிளாஸுடன் செய்வது போலவே, hover:, focus:, md:, அல்லது dark: போன்ற எந்த வேரியண்ட்டையும் ஒரு ஆர்பிட்ரரி ப்ராப்பர்ட்டிக்கு முன்னொட்டாக சேர்க்கலாம்.

இது ரெஸ்பான்சிவ் மற்றும் இன்டராக்டிவ் டிசைன்களை உருவாக்குவதற்கான பரந்த அளவிலான சாத்தியக்கூறுகளைத் திறக்கிறது.

• ரெஸ்பான்சிவ் டிசைன்: ஒரு குறிப்பிட்ட பிரேக் பாயிண்ட்டில் ஒரு மதிப்பை மாற்றவும்.
class="w-[100%] md:w-[50vw]"
• இன்டராக்டிவ் ஸ்டேட்ஸ்: hover, focus, அல்லது பிற ஸ்டேட்களில் ஒரு ஸ்டைலைப் பயன்படுத்தவும்.
class="[mask-image:none] hover:[mask-image:linear-gradient(to_top,transparent,black)]"
• டார்க் மோட்: லைட் மற்றும் டார்க் தீம்களுக்கு வெவ்வேறு மதிப்புகளைப் பயன்படுத்தவும், பெரும்பாலும் CSS வேரியபிள்களுடன்.
class="bg-white dark:bg-[var(--dark-mode-bg)]"
• குரூப் மற்றும் பியர் ஸ்டேட்ஸ்: ஒரு பேரண்ட்டின் ஸ்டேட்டின் அடிப்படையில் ஒரு சைல்ட் எலிமெண்ட்டை மாற்றவும்.
class="group [transform:none] group-hover:[transform:translateX(10px)]"

இந்த ஒருங்கிணைப்பு என்றால் நீங்கள் ஒரு கஸ்டம் மதிப்பைப் பயன்படுத்துவதற்கும் அதை ரெஸ்பான்சிவ் அல்லது இன்டராக்டிவ் ஆக்குவதற்கும் இடையில் ஒருபோதும் தேர்வு செய்ய வேண்டியதில்லை. நீங்கள் ஏற்கனவே பழகிய அதே உள்ளுணர்வு சிண்டாக்ஸைப் பயன்படுத்தி இரண்டையும் பெறுகிறீர்கள்.

செயல்திறன் பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

ஒரு பொதுவான கேள்வி என்னவென்றால், பல ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களைப் பயன்படுத்துவது இறுதி CSS கோப்பை பெரிதாக்குமா என்பதுதான். JIT கம்பைலருக்கு நன்றி, பதில் ஒரு உறுதியான இல்லை.

டெயில்விண்டின் JIT என்ஜின் உங்கள் சோர்ஸ் கோப்புகளை (HTML, JS, JSX, போன்றவை) கிளாஸ் பெயர்களுக்காக ஸ்கேன் செய்வதன் மூலம் செயல்படுகிறது. பின்னர் அது கண்டறிந்த கிளாஸ்களுக்கு மட்டுமே CSS-ஐ உருவாக்குகிறது. இது ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களுக்கும் பொருந்தும். நீங்கள் w-[337px]-ஐ ஒருமுறை பயன்படுத்தினால், அந்த ஒற்றை கிளாஸ் உருவாக்கப்படுகிறது. நீங்கள் அதை ஒருபோதும் பயன்படுத்தவில்லை என்றால், அது உங்கள் CSS-இல் ஒருபோதும் இருக்காது. நீங்கள் w-[337px] மற்றும் w-[338px]-ஐப் பயன்படுத்தினால், இரண்டு தனித்தனி கிளாஸ்கள் உருவாக்கப்படுகின்றன. செயல்திறன் தாக்கம் மிகக் குறைவு, மற்றும் இறுதி CSS பண்டல் நீங்கள் உண்மையில் பயன்படுத்தும் ஸ்டைல்களை மட்டுமே கொண்டு, முடிந்தவரை சிறியதாகவே உள்ளது.

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

1. தீம் முதலில், ஆர்பிட்ரரி இரண்டாவதாக: உங்கள் வடிவமைப்பு அமைப்பை வரையறுக்க எப்போதும் உங்கள் tailwind.config.js-க்கு முன்னுரிமை கொடுங்கள். விதியை நிரூபிக்கும் விதிவிலக்குகளுக்கு ஆர்பிட்ரரி ப்ராப்பர்டீஸ்களைப் பயன்படுத்தவும்.
2. ஸ்பேஸ்களுக்கு அண்டர்ஸ்கோர்: உங்கள் கிளாஸ் லிஸ்ட்டை உடைப்பதைத் தவிர்க்க, பல-சொல் மதிப்புகளில் உள்ள ஸ்பேஸ்களை அண்டர்ஸ்கோர்களால் (_) மாற்ற நினைவில் கொள்ளுங்கள்.
3. வாசிக்கக்கூடியதாக வைத்திருங்கள்: நீங்கள் ஒரு ஆர்பிட்ரரி ப்ராப்பர்ட்டியில் மிகவும் சிக்கலான மதிப்புகளை வைக்க முடியும் என்றாலும், அது படிக்க முடியாததாக மாறினால், ஒரு கமெண்ட் தேவையா அல்லது அந்த லாஜிக் @apply ஐப் பயன்படுத்தி ஒரு பிரத்யேக CSS கோப்பிற்கு மிகவும் பொருத்தமானதா என்பதைக் கருத்தில் கொள்ளுங்கள்.
4. CSS வேரியபிள்களைத் தழுவுங்கள்: ஒரு காம்போனென்ட்டிற்குள் பகிரப்பட வேண்டிய அல்லது ஒரு பேரண்ட்டால் மாற்றப்பட வேண்டிய டைனமிக் மதிப்புகளுக்கு, CSS வேரியபிள்கள் ஒரு தூய்மையான, சக்திவாய்ந்த மற்றும் நவீன தீர்வாகும்.
5. அதிகமாகப் பயன்படுத்த வேண்டாம்: ஒரு காம்போனென்ட்டின் கிளாஸ் லிஸ்ட் ஒரு நீண்ட, நிர்வகிக்க முடியாத ஆர்பிட்ரரி மதிப்புகளின் சரமாக மாறுவதைக் கண்டால், அது அந்த காம்போனென்ட்டை ரீஃபாக்டரிங் செய்ய வேண்டும் என்பதற்கான அறிகுறியாக இருக்கலாம். ஒருவேளை அதை சிறிய காம்போனென்ட்களாக உடைக்க வேண்டும், அல்லது ஒரு சிக்கலான, மீண்டும் பயன்படுத்தக்கூடிய ஸ்டைல் செட் @apply உடன் பிரித்தெடுக்கப்படலாம்.

முடிவு: எல்லையற்ற சக்தி, பூஜ்ஜிய சமரசம்

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

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