टेलविंड सीएसएस आर्बिट्ररी प्रॉपर्टीज: CSS-in-Utility साठी अंतिम मार्गदर्शक

टेलविंड सीएसएसने फ्रंट-एंड डेव्हलपमेंटच्या पद्धतीत क्रांती घडवून आणली आहे. त्याची युटिलिटी-फर्स्ट पद्धत थेट मार्कअपमध्ये इंटरफेस तयार करून जलद प्रोटोटाइपिंग, सुसंगत डिझाइन सिस्टीम आणि अत्यंत देखरेख करण्यायोग्य कोडबेसची परवानगी देते. तथापि, सर्वात व्यापक युटिलिटी लायब्ररीसुद्धा प्रत्येक संभाव्य डिझाइनची आवश्यकता पूर्ण करू शकत नाही. जेव्हा तुम्हाला margin-top: 13px सारखी एखादी विशिष्ट व्हॅल्यू किंवा डिझाइनरने दिलेला एक युनिक clip-path आवश्यक असतो तेव्हा काय होते? तुम्हाला युटिलिटी-फर्स्ट वर्कफ्लो सोडून वेगळ्या सीएसएस फाईलमध्ये जावे लागते का?

पूर्वी, ही एक खरी चिंता होती. परंतु जस्ट-इन-टाइम (JIT) कंपाइलरच्या आगमनाने, टेलविंडने एक गेम-चेंजिंग वैशिष्ट्य सादर केले: आर्बिट्ररी प्रॉपर्टीज. ही शक्तिशाली यंत्रणा एक सोपा मार्ग प्रदान करते, ज्यामुळे तुम्हाला आवश्यक असलेली कोणतीही सीएसएस व्हॅल्यू थेट तुमच्या क्लास लिस्टमध्ये वापरता येते. हे एका सिस्टिमॅटिक युटिलिटी फ्रेमवर्क आणि रॉ सीएसएसच्या अमर्याद लवचिकतेचे परिपूर्ण मिश्रण आहे.

हे सविस्तर मार्गदर्शक तुम्हाला आर्बिट्ररी प्रॉपर्टीजच्या जगात घेऊन जाईल. आपण त्या काय आहेत, त्या इतक्या शक्तिशाली का आहेत, आणि आपल्या एचटीएमएलमधून बाहेर न पडता कल्पना करता येणारी कोणतीही गोष्ट तयार करण्यासाठी त्यांचा प्रभावीपणे वापर कसा करायचा हे पाहू.

टेलविंड सीएसएस आर्बिट्ररी प्रॉपर्टीज काय आहेत?

सोप्या भाषेत सांगायचे तर, आर्बिट्ररी प्रॉपर्टीज ही टेलविंड सीएसएसमधील एक विशेष सिंटॅक्स आहे जी तुम्हाला कस्टम व्हॅल्यूसह एक युटिलिटी क्लास तयार करू देते. तुमच्या tailwind.config.js फाईलमधील पूर्वनिर्धारित व्हॅल्यूजपुरते मर्यादित न राहता (जसे की p-4 साठी padding: 1rem), तुम्ही तुम्हाला हवी असलेली अचूक सीएसएस निर्दिष्ट करू शकता.

याची सिंटॅक्स सोपी आहे आणि ती स्क्वेअर ब्रॅकेट्समध्ये लिहिली जाते:

[property:value]

चला एक क्लासिक उदाहरण पाहूया. कल्पना करा की तुम्हाला एखादे एलिमेंट वरून नक्की ११७ पिक्सेलवर ठेवायचे आहे. टेलविंडच्या डीफॉल्ट स्पेसिंग स्केलमध्ये '117px' साठी युटिलिटी असण्याची शक्यता नाही. एक कस्टम क्लास तयार करण्याऐवजी, तुम्ही फक्त लिहू शकता:

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

पडद्यामागे, टेलविंडचा JIT कंपाइलर हे पाहतो आणि काही मिलिसेकंदांमध्ये, तो तुमच्यासाठी संबंधित सीएसएस क्लास तयार करतो:

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

हे साधे पण प्रभावी वैशिष्ट्य पूर्णपणे युटिलिटी-ड्रिव्हन वर्कफ्लोमधील अंतिम अडथळा दूर करते. हे त्या एकदाच वापरल्या जाणाऱ्या स्टाइल्ससाठी एक तात्काळ, इनलाइन समाधान प्रदान करते, ज्या तुमच्या ग्लोबल थीमचा भाग नसतात, ज्यामुळे तुम्ही कामाच्या प्रवाहात राहू शकता आणि गती टिकवून ठेवू शकता.

आर्बिट्ररी प्रॉपर्टीज का आणि केव्हा वापराव्यात

आर्बिट्ररी प्रॉपर्टीज हे एक अपवादात्मक साधन आहे, परंतु कोणत्याही शक्तिशाली साधनाप्रमाणे, ते केव्हा वापरायचे आणि केव्हा तुमच्या कॉन्फिगर केलेल्या डिझाइन सिस्टमला चिकटून राहायचे हे समजून घेणे आवश्यक आहे. त्यांचा योग्य वापर केल्याने तुमचा प्रोजेक्ट लवचिक आणि देखरेख करण्यायोग्य दोन्ही राहतो.

आर्बिट्ररी प्रॉपर्टीजसाठी आदर्श वापर प्रकरणे

• एकदाच वापरल्या जाणाऱ्या स्टाइल्स (One-Off Styles): हे प्राथमिक आणि सर्वात सामान्य वापर प्रकरण आहे. जेव्हा तुमच्याकडे एखादी स्टाईल असते जी एकाच एलिमेंटसाठी युनिक असते आणि ती पुन्हा वापरली जाण्याची शक्यता कमी असते, तेव्हा आर्बिट्ररी प्रॉपर्टी एक परिपूर्ण उपाय आहे. उदाहरणांमध्ये तात्पुरत्या मॉडलसाठी एक विशिष्ट z-index, एका सजावटीच्या एलिमेंटसाठी पिक्सेल-परफेक्ट पोझिशन, किंवा हीरो सेक्शनसाठी कस्टम ग्रेडियंट यांचा समावेश आहे.
• प्रोटोटाइपिंग आणि प्रयोग (Prototyping and Experimentation): जेव्हा तुम्ही डेव्हलपमेंटच्या सर्जनशील टप्प्यात असता, तेव्हा तुम्हाला व्हॅल्यूजसह पटकन प्रयोग करण्याची आवश्यकता असते. आर्बिट्ररी प्रॉपर्टीज एक अविश्वसनीय फीडबॅक लूप प्रदान करतात. तुम्ही ब्राउझरच्या डेव्हलपर टूल्समध्ये थेट रुंदी, रंग किंवा ट्रान्सफॉर्म व्हॅल्यू बदलू शकता आणि त्याचे परिणाम त्वरित पाहू शकता, config फाईल सतत पुन्हा कंपाइल किंवा संपादित न करता.
• डायनॅमिक डेटासोबत काम करणे: जेव्हा व्हॅल्यूज बॅकएंड सिस्टम, CMS किंवा वापरकर्त्याच्या इनपुटमधून येतात, तेव्हा आर्बिट्ररी प्रॉपर्टीज अपरिहार्य असतात. उदाहरणार्थ, गणन केलेल्या टक्केवारीवर आधारित प्रोग्रेस बार रेंडर करणे क्षुल्लक आहे.
  <div class="h-2 bg-blue-500 w-[{{ progressPercentage }}%]'></div>
• आधुनिक किंवा विशिष्ट सीएसएस प्रॉपर्टीजचा वापर: सीएसएसचे जग सतत विकसित होत आहे. नवीन किंवा प्रायोगिक प्रॉपर्टीज असू शकतात ज्यांच्यासाठी टेलविंडकडे अद्याप समर्पित युटिलिटीज नाहीत. आर्बिट्ररी प्रॉपर्टीज तुम्हाला scroll-snap-type, container-type, किंवा प्रगत mask-image इफेक्ट्ससह संपूर्ण सीएसएस भाषेमध्ये त्वरित प्रवेश देतात.

आर्बिट्ररी प्रॉपर्टीज केव्हा टाळाव्यात

आर्बिट्ररी प्रॉपर्टीज शक्तिशाली असल्या तरी, त्यांनी तुमच्या डिझाइन सिस्टमची जागा घेऊ नये. टेलविंडची मुख्य ताकद तुमच्या 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] सिंटॅक्स ही फक्त सुरुवात आहे. आर्बिट्ररी प्रॉपर्टीजची खरी क्षमता अनलॉक करण्यासाठी, तुम्हाला आणखी काही आवश्यक संकल्पना समजून घेणे आवश्यक आहे.

व्हॅल्यूजमधील स्पेसेस हाताळणे

सीएसएस प्रॉपर्टी व्हॅल्यूजमध्ये अनेकदा स्पेसेस असतात, उदाहरणार्थ, grid-template-columns किंवा box-shadow मध्ये. एचटीएमएलमध्ये क्लास नावे वेगळे करण्यासाठी स्पेसेस वापरल्या जात असल्याने, तुम्ही त्यांना आर्बिट्ररी प्रॉपर्टीमध्ये अंडरस्कोर (_) चिन्हासह बदलले पाहिजे.

चुकीचे (हे चालणार नाही): class="[grid-template-columns:1fr 500px 2fr]"

बरोबर: class="[grid-template-columns:1fr_500px_2fr]"

हा एक महत्त्वाचा नियम लक्षात ठेवण्यासारखा आहे. अंतिम सीएसएस तयार करताना JIT कंपाइलर आपोआप अंडरस्कोर्सना स्पेसेसमध्ये रूपांतरित करेल.

सीएसएस व्हेरिएबल्स (कस्टम प्रॉपर्टीज) वापरणे

आर्बिट्ररी प्रॉपर्टीजमध्ये सीएसएस व्हेरिएबल्ससाठी फर्स्ट-क्लास सपोर्ट आहे, जे डायनॅमिक आणि कंपोनेंट-स्कोप्ड थीमिंगसाठी शक्यतांचे जग उघडते.

तुम्ही सीएसएस व्हेरिएबल्स परिभाषित (define) आणि वापर (use) दोन्ही करू शकता:

• व्हेरिएबल परिभाषित करणे: [--variable-name:value] सिंटॅक्स वापरा.
• व्हेरिएबल वापरणे: दुसऱ्या आर्बिट्ररी प्रॉपर्टीमध्ये मानक var(--variable-name) सीएसएस फंक्शन वापरा.

पॅरेंटच्या थीम रंगाचा आदर करणाऱ्या कंपोनेंटसाठी येथे एक शक्तिशाली उदाहरण आहे:

<!-- पॅरेंट कंपोनेंट थीम कलर सेट करतो -->
<div class="[--theme-color:blue]">
  <h3 class="text-[var(--theme-color)]">थीम असलेले शीर्षक</h3>
  <p>हा कंपोनेंट आता निळा रंग वापरेल.</p>
</div>

<!-- वेगळ्या थीम कलरसह दुसरे उदाहरण -->
<div class="[--theme-color:green]">
  <h3 class="text-[var(--theme-color)]">थीम असलेले शीर्षक</h3>
  <p>हा कंपोनेंट आता हिरवा रंग वापरेल.</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) साठी एक क्लास तयार करेल.

जागतिक दृष्टीकोनातून व्यावहारिक उदाहरणे

चला काही वास्तववादी, जागतिक स्तरावर संबंधित उदाहरणांसह सिद्धांताला व्यवहारात आणूया.

उदाहरण १: पिक्सेल-परफेक्ट यूआय अॅक्सेंट्स

एका डिझाइनरने तुम्हाला युझर प्रोफाइल कार्डसाठी एक मॉकअप दिले आहे जिथे अवतारला एक विशिष्ट, नॉन-स्टँडर्ड बॉर्डर ऑफसेट आहे.

<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>

येथे, top-[-4px] वापरणे हे एकदाच वापरण्यासाठी .avatar-border-offset सारखा कस्टम सीएसएस क्लास तयार करण्यापेक्षा खूपच स्वच्छ आणि अधिक थेट आहे.

उदाहरण २: कस्टम ग्रिड लेआउट्स

तुम्ही एका जागतिक बातमी लेखाच्या पानासाठी लेआउट तयार करत आहात, ज्यासाठी मुख्य सामग्री क्षेत्र आणि निश्चित रुंदीचा साइडबार आवश्यक आहे.

<div class="grid grid-cols-[1fr_300px] gap-8">
  <main>... मुख्य लेखाची सामग्री ...</main>
  <aside>... जाहिराती किंवा संबंधित लिंक्ससह साइडबार ...</aside>
</div>

grid-cols-[1fr_300px] क्लास एक दोन-कॉलम ग्रिड तयार करतो जिथे पहिला कॉलम लवचिक असतो आणि दुसरा 300px वर निश्चित असतो - एक अतिशय सामान्य पॅटर्न जो आता लागू करणे क्षुल्लक आहे.

उदाहरण ३: युनिक बॅकग्राउंड ग्रेडियंट्स

एका नवीन उत्पादन लॉन्चसाठी तुमच्या कंपनीच्या ब्रँडिंगमध्ये एक विशिष्ट दोन-टोनी ग्रेडियंट समाविष्ट आहे जो तुमच्या मानक थीमचा भाग नाही.

<div class="p-10 rounded-lg bg-[linear-gradient(110deg,_#a6e3e9_0%,_#a8eec8_100%)]">
  <h2 class="text-white text-2xl font-bold">नवीन उत्पादन लॉन्च!</h2>
</div>

हे तुमच्या थीममध्ये एकदाच वापरल्या जाणाऱ्या ग्रेडियंटने प्रदूषण टाळते. तुम्ही ते थीम व्हॅल्यूजसह एकत्र करू शकता: bg-[linear-gradient(to_right,theme(colors.blue.500),theme(colors.purple.500))].

उदाहरण ४: `clip-path` सह प्रगत सीएसएस

एका इमेज गॅलरीला अधिक डायनॅमिक बनवण्यासाठी, तुम्हाला थंबनेलवर एक नॉन-रेक्टँग्युलर आकार लागू करायचा आहे.

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

हे तुम्हाला कोणत्याही अतिरिक्त सीएसएस फाइल्स किंवा कॉन्फिगरेशनशिवाय clip-path च्या पूर्ण शक्तीमध्ये त्वरित प्रवेश देते.

आर्बिट्ररी प्रॉपर्टीज आणि मॉडिफायर्स

आर्बिट्ररी प्रॉपर्टीजच्या सर्वात सुंदर पैलूंपैकी एक म्हणजे टेलविंडच्या शक्तिशाली मॉडिफायर सिस्टमसह त्यांचे अखंड एकत्रीकरण. तुम्ही कोणत्याही व्हेरिएंटला - जसे की hover:, focus:, md:, किंवा dark: - एका आर्बिट्ररी प्रॉपर्टीच्या आधी जोडू शकता, जसे तुम्ही एका मानक युटिलिटी क्लाससह करता.

हे रिस्पॉन्सिव्ह आणि इंटरॅक्टिव्ह डिझाइन तयार करण्यासाठी शक्यतांची एक मोठी श्रेणी उघडते.

• रिस्पॉन्सिव्ह डिझाइन: एका विशिष्ट ब्रेकपॉइंटवर व्हॅल्यू बदला.
class="w-[100%] md:w-[50vw]"
• इंटरॅक्टिव्ह स्टेट्स: हॉवर, फोकस किंवा इतर स्टेट्सवर स्टाईल लागू करा.
class="[mask-image:none] hover:[mask-image:linear-gradient(to_top,transparent,black)]"
• डार्क मोड: लाईट आणि डार्क थीमसाठी भिन्न व्हॅल्यूज वापरा, अनेकदा सीएसएस व्हेरिएबल्ससह.
class="bg-white dark:bg-[var(--dark-mode-bg)]"
• ग्रुप आणि पीअर स्टेट्स: पॅरेंटच्या स्टेटवर आधारित चाईल्ड एलिमेंटमध्ये बदल करा.
class="group [transform:none] group-hover:[transform:translateX(10px)]"

या एकत्रीकरणाचा अर्थ असा आहे की तुम्हाला कस्टम व्हॅल्यू वापरणे आणि ते रिस्पॉन्सिव्ह किंवा इंटरॅक्टिव्ह बनवणे यामध्ये कधीही निवड करावी लागणार नाही. तुम्हाला दोन्ही मिळतात, त्याच अंतर्ज्ञानी सिंटॅक्सचा वापर करून ज्याच्याशी तुम्ही आधीच परिचित आहात.

कामगिरी संबंधी विचार आणि सर्वोत्तम पद्धती

एक सामान्य प्रश्न असा आहे की अनेक आर्बिट्ररी प्रॉपर्टीज वापरल्याने अंतिम सीएसएस फाईल फुगवेल का. JIT कंपाइलरमुळे, उत्तर एक जोरदार नाही आहे.

टेलविंडचे JIT इंजिन तुमच्या सोर्स फाइल्स (HTML, JS, JSX, इ.) क्लास नावासाठी स्कॅन करून काम करते. त्यानंतर ते फक्त आढळलेल्या क्लासेससाठी सीएसएस तयार करते. हे आर्बिट्ररी प्रॉपर्टीजवर देखील लागू होते. जर तुम्ही w-[337px] एकदा वापरला, तर तो एकच क्लास तयार होतो. जर तुम्ही तो कधीही वापरला नाही, तर तो तुमच्या सीएसएसमध्ये कधीही अस्तित्वात नसतो. जर तुम्ही w-[337px] आणि w-[338px] वापरलात, तर दोन वेगळे क्लासेस तयार होतात. कामगिरीवर होणारा परिणाम नगण्य आहे आणि अंतिम सीएसएस बंडल शक्य तितका लहान राहतो, ज्यात फक्त तुम्ही प्रत्यक्षात वापरत असलेल्या स्टाइल्स असतात.

सर्वोत्तम पद्धतींचा सारांश

1. आधी थीम, नंतर आर्बिट्ररी: तुमची डिझाइन सिस्टम परिभाषित करण्यासाठी नेहमी तुमच्या tailwind.config.js ला प्राधान्य द्या. नियमाला सिद्ध करणाऱ्या अपवादांसाठी आर्बिट्ररी प्रॉपर्टीज वापरा.
2. स्पेसेससाठी अंडरस्कोर: तुमची क्लास लिस्ट खंडित होऊ नये म्हणून मल्टी-वर्ड व्हॅल्यूजमधील स्पेसेस अंडरस्कोर (_) ने बदलायला विसरू नका.
3. ते वाचनीय ठेवा: तुम्ही आर्बिट्ररी प्रॉपर्टीमध्ये खूप क्लिष्ट व्हॅल्यूज टाकू शकत असला तरी, जर ते वाचायला अवघड होत असेल, तर कमेंटची आवश्यकता आहे का किंवा ते तर्क @apply वापरून वेगळ्या सीएसएस फाईलसाठी अधिक योग्य आहे का याचा विचार करा.
4. सीएसएस व्हेरिएबल्सचा स्वीकार करा: डायनॅमिक व्हॅल्यूजसाठी ज्यांना कंपोनेंटमध्ये शेअर करण्याची किंवा पॅरेंटद्वारे बदलण्याची आवश्यकता असते, सीएसएस व्हेरिएबल्स एक स्वच्छ, शक्तिशाली आणि आधुनिक उपाय आहे.
5. अतिवापर करू नका: जर तुम्हाला आढळले की एखाद्या कंपोनेंटची क्लास लिस्ट आर्बिट्ररी व्हॅल्यूजची एक लांब, व्यवस्थापित न करता येणारी स्ट्रिंग बनत आहे, तर हे एक संकेत असू शकते की कंपोनेंटला रिफॅक्टरिंगची आवश्यकता आहे. कदाचित ते लहान कंपोनेंट्समध्ये विभागले जावे, किंवा एक क्लिष्ट, पुन्हा वापरता येणारा स्टाईल सेट @apply सह काढला जाऊ शकतो.

निष्कर्ष: अमर्याद शक्ती, शून्य तडजोड

टेलविंड सीएसएस आर्बिट्ररी प्रॉपर्टीज फक्त एक चतुर युक्ती नाही; ते युटिलिटी-फर्स्ट पॅराडाइमच्या मूलभूत उत्क्रांतीचे प्रतिनिधित्व करतात. ते काळजीपूर्वक डिझाइन केलेले एस्केप हॅच आहेत जे सुनिश्चित करतात की फ्रेमवर्क तुमच्या सर्जनशीलतेला कधीही मर्यादित करत नाही. तुमच्या मार्कअपमधूनच सीएसएसच्या पूर्ण शक्तीशी थेट पूल प्रदान करून, ते स्टाईल लिहिण्यासाठी तुमच्या एचटीएमएलमधून बाहेर पडण्याचे शेवटचे कारण काढून टाकतात.

सुसंगततेसाठी तुमच्या थीमवर केव्हा अवलंबून राहायचे आणि लवचिकतेसाठी आर्बिट्ररी प्रॉपर्टी केव्हा वापरायची हे समजून घेऊन, तुम्ही अधिक जलद, अधिक देखरेख करण्यायोग्य आणि अधिक महत्त्वाकांक्षी युझर इंटरफेस तयार करू शकता. तुम्हाला आता डिझाइन सिस्टमची रचना आणि आधुनिक वेब डिझाइनच्या पिक्सेल-परफेक्ट मागण्यांमध्ये तडजोड करावी लागणार नाही. आर्बिट्ररी प्रॉपर्टीजसह, टेलविंड सीएसएस तुम्हाला दोन्ही देते.