ನಮ್ಮ Tailwind CSS ವೇರಿಯಂಟ್‌ಗಳ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕ UIಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಸೂಡೊ-ಕ್ಲಾಸ್, ಸ್ಟೇಟ್, ಗ್ರೂಪ್, ಮತ್ತು ಪೀರ್ ಸ್ಟೈಲಿಂಗ್ ಕಲಿಯಿರಿ.
Tailwind CSS ವೇರಿಯಂಟ್‌ಗಳಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ಸೂಡೊ-ಕ್ಲಾಸ್ ಮತ್ತು ಸ್ಟೇಟ್ ಸ್ಟೈಲಿಂಗ್‌ನ ಆಳವಾದ ನೋಟ
ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ, ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುವುದು ಮಾತ್ರವಲ್ಲದೆ, ಬಳಕೆದಾರರ ಸಂವಾದಕ್ಕೆ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಸ್ಪಂದಿಸುವಂತಹ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು (UI) ರಚಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಇಲ್ಲಿಯೇ Tailwind CSS ನಂತಹ ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ನಿಜವಾದ ಶಕ್ತಿ ಪ್ರಕಾಶಿಸುತ್ತದೆ. ಅದರ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳು 'ಏನು'—ಅಂದರೆ, ಅನ್ವಯಿಸಬೇಕಾದ ನಿರ್ದಿಷ್ಟ ಶೈಲಿಯ ನಿಯಮವನ್ನು—ಒದಗಿಸಿದರೆ, ಅದರ ವೇರಿಯಂಟ್‌ಗಳು ನಿರ್ಣಾಯಕವಾದ 'ಯಾವಾಗ' ಎಂಬುದನ್ನು ಒದಗಿಸುತ್ತವೆ.
ವೇರಿಯಂಟ್‌ಗಳು ಸ್ಥಿರ ವಿನ್ಯಾಸಗಳನ್ನು ಸಂವಾದಾತ್ಮಕ ಅನುಭವಗಳಾಗಿ ಪರಿವರ್ತಿಸುವ ರಹಸ್ಯ ಪದಾರ್ಥಗಳಾಗಿವೆ. ಅವುಗಳು ವಿಶೇಷ ಪೂರ್ವಪ್ರತ್ಯಯಗಳಾಗಿದ್ದು, ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಿತಿ, ಬಳಕೆದಾರರ ಸಂವಾದಗಳು, ಅಥವಾ ಬೇರೆ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ. ಹೋವರ್ ಮೇಲೆ ಬಟನ್‌ನ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುವುದಿರಲಿ, ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ ಫೋಕಸ್ ಆದಾಗ ಅದನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದಿರಲಿ, ಅಥವಾ ಚೆಕ್‌ಬಾಕ್ಸ್ ಚೆಕ್ ಮಾಡಿದಾಗ ಸಂದೇಶವನ್ನು ತೋರಿಸುವುದಿರಲಿ, ಈ ಎಲ್ಲ ಕೆಲಸಗಳಿಗೆ ವೇರಿಯಂಟ್‌ಗಳೇ ಸಾಧನಗಳಾಗಿವೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ವಿಶ್ವಾದ್ಯಂತದ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ನಾವು Tailwind CSS ವೇರಿಯಂಟ್‌ಗಳ ಸಂಪೂರ್ಣ ಶ್ರೇಣಿಯನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, hover ಮತ್ತು focus ನಂತಹ ಮೂಲಭೂತ ಸೂಡೊ-ಕ್ಲಾಸ್‌ಗಳಿಂದ ಹಿಡಿದು, ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಸಂವಾದಗಳಿಗಾಗಿ group ಮತ್ತು peer ಬಳಸುವ ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ. ಇದರ ಕೊನೆಯಲ್ಲಿ, ನಿಮ್ಮ HTML ನಲ್ಲೇ ಸಂಪೂರ್ಣವಾಗಿ ಅತ್ಯಾಧುನಿಕ, ಸ್ಟೇಟ್-ಅವೇರ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಜ್ಞಾನವನ್ನು ನೀವು ಹೊಂದಿರುತ್ತೀರಿ.
ಮೂಲ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ವೇರಿಯಂಟ್‌ಗಳು ಎಂದರೇನು?
ಮೂಲಭೂತವಾಗಿ, Tailwind CSS ನಲ್ಲಿ ವೇರಿಯಂಟ್ ಎನ್ನುವುದು ನೀವು ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗೆ ಸೇರಿಸುವ ಒಂದು ಪೂರ್ವಪ್ರತ್ಯಯವಾಗಿದೆ, ಇದನ್ನು ಕೊಲೊನ್ (:) ನಿಂದ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ. ಈ ಪೂರ್ವಪ್ರತ್ಯಯವು ಒಂದು ಷರತ್ತಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಅದರ ನಂತರ ಬರುವ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್ ಆ ಷರತ್ತು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಅನ್ವಯವಾಗುತ್ತದೆ.
ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳ ಮತ್ತು ಸಹಜವಾಗಿದೆ:
variant:utility-class
ಉದಾಹರಣೆಗೆ, ಒಂದು ಸರಳ ಬಟನ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ನೀವು ಅದರ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ನೀಲಿ ಬಣ್ಣದಲ್ಲಿರಬೇಕೆಂದು ಬಯಸಬಹುದು, ಆದರೆ ಬಳಕೆದಾರರು ಅದರ ಮೇಲೆ ಮೌಸ್ ಹೋವರ್ ಮಾಡಿದಾಗ ಗಾಢ ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಬದಲಾಗಬೇಕು. ಸಾಂಪ್ರದಾಯಿಕ CSS ನಲ್ಲಿ, ನೀವು ಹೀಗೆ ಬರೆಯುತ್ತಿದ್ದಿರಿ:
.my-button {
background-color: #3b82f6; /* bg-blue-500 */
}
.my-button:hover {
background-color: #2563eb; /* bg-blue-700 */
}
Tailwind ನ ವೇರಿಯಂಟ್‌ಗಳೊಂದಿಗೆ, ನೀವು ಅದೇ ಫಲಿತಾಂಶವನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ HTML ನಲ್ಲಿ ಸಾಧಿಸಬಹುದು, ನಿಮ್ಮ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ನಿಮ್ಮ ಮಾರ್ಕಪ್‌ನೊಂದಿಗೆ ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಇರಿಸಿಕೊಂಡು:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me
</button>
ಇಲ್ಲಿ, hover: ಒಂದು ವೇರಿಯಂಟ್ ಆಗಿದೆ. ಇದು Tailwind ನ ಜಸ್ಟ್-ಇನ್-ಟೈಮ್ (JIT) ಇಂಜಿನ್‌ಗೆ bg-blue-700 ಅನ್ನು ಬಟನ್ :hover ಸ್ಥಿತಿಯಲ್ಲಿದ್ದಾಗ ಮಾತ್ರ ಅನ್ವಯಿಸುವ CSS ನಿಯಮವನ್ನು ರಚಿಸಲು ಹೇಳುತ್ತದೆ. ಈ ಸರಳವಾದರೂ ಶಕ್ತಿಯುತವಾದ ಪರಿಕಲ್ಪನೆಯು Tailwind CSS ನಲ್ಲಿನ ಎಲ್ಲಾ ಸಂವಾದಾತ್ಮಕ ಸ್ಟೈಲಿಂಗ್‌ನ ಅಡಿಪಾಯವಾಗಿದೆ.
ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ವೇರಿಯಂಟ್‌ಗಳು: ಸಂವಾದಾತ್ಮಕ ಸೂಡೊ-ಕ್ಲಾಸ್‌ಗಳು
ಸೂಡೊ-ಕ್ಲಾಸ್‌ಗಳು ಎನ್ನುವುದು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ವಿಶೇಷ ಸ್ಥಿತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳಾಗಿವೆ. ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ನೀವು ಪ್ರತಿದಿನ ಬಳಸುವ ಎಲ್ಲಾ ಸಾಮಾನ್ಯ ಸೂಡೊ-ಕ್ಲಾಸ್‌ಗಳಿಗಾಗಿ Tailwind ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
hover ವೇರಿಯಂಟ್: ಮೌಸ್ ಕರ್ಸರ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು
hover ವೇರಿಯಂಟ್ ಬಹುಶಃ ಅತಿ ಹೆಚ್ಚು ಬಳಸಲ್ಪಡುವಂಥದ್ದು. ಬಳಕೆದಾರರ ಕರ್ಸರ್ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಮೇಲೆ ಬಂದಾಗ ಇದು ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಲಿಂಕ್‌ಗಳು, ಬಟನ್‌ಗಳು, ಕಾರ್ಡ್‌ಗಳು, ಮತ್ತು ಯಾವುದೇ ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಲು ಇದು ಅತ್ಯಗತ್ಯ.
ಉದಾಹರಣೆ: ಒಂದು ಸಂವಾದಾತ್ಮಕ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್
ಹೋವರ್ ಮಾಡಿದಾಗ, ಮೇಲಕ್ಕೆದ್ದು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾದ ನೆರಳನ್ನು ಪಡೆಯುವ ಕಾರ್ಡ್ ಒಂದನ್ನು ರಚಿಸೋಣ, ಇದು ಆಧುನಿಕ UI ವಿನ್ಯಾಸದಲ್ಲಿ ಒಂದು ಸಾಮಾನ್ಯ ಮಾದರಿಯಾಗಿದೆ.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md
transition-all duration-300
hover:shadow-xl hover:-translate-y-1">
<h3 class="text-xl font-medium text-black">Global Insights</h3>
<p class="text-slate-500">Discover trends from around the world.</p>
</div>
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:
hover:shadow-xlಹೋವರ್ ಮೇಲೆ ಬಾಕ್ಸ್-ಶ್ಯಾಡೋವನ್ನು ದೊಡ್ಡದಾಗಿಸುತ್ತದೆ.hover:-translate-y-1ಕಾರ್ಡ್ ಅನ್ನು ಸ್ವಲ್ಪ ಮೇಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ, "ಮೇಲಕ್ಕೆತ್ತುವ" ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.- ಸ್ಥಿತಿಯ ಬದಲಾವಣೆಯನ್ನು ಸುಗಮ ಮತ್ತು ಅನಿಮೇಟೆಡ್ ಮಾಡಲು ನಾವು
transition-allಮತ್ತುduration-300ಅನ್ನು ಸೇರಿಸಿದ್ದೇವೆ.
focus ವೇರಿಯಂಟ್: ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಾಗಿ ಸ್ಟೈಲಿಂಗ್
ಪ್ರವೇಶಿಸುವಿಕೆಗೆ focus ವೇರಿಯಂಟ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಮೌಸ್‌ನಿಂದ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ ಕೀಬೋರ್ಡ್ ಬಳಸಿ (ಉದಾ., 'Tab' ಕೀಲಿಯೊಂದಿಗೆ) ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ಒಂದು ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆಯಾದಾಗ ಇದು ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಇದನ್ನು ಹೆಚ್ಚಾಗಿ ಇನ್‌ಪುಟ್‌ಗಳು, ಟೆಕ್ಸ್ಟ್‌ಏರಿಯಾಗಳು ಮತ್ತು ಬಟನ್‌ಗಳಂತಹ ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಬಳಸಲಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ: ಚೆನ್ನಾಗಿ-ಸ್ಟೈಲ್ ಮಾಡಿದ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್
ಒಂದು ಸ್ಪಷ್ಟವಾದ ಫೋಕಸ್ ಸ್ಥಿತಿಯು ಬಳಕೆದಾರರಿಗೆ ಅವರು ಪುಟದಲ್ಲಿ ಎಲ್ಲಿದ್ದಾರೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ತಿಳಿಸುತ್ತದೆ, ಇದು ಕೀಬೋರ್ಡ್-ಮಾತ್ರದ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ಅತ್ಯಗತ್ಯ.
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email"
class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md
text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
ಇಲ್ಲಿ focus: ವೇರಿಯಂಟ್‌ಗಳು ಏನು ಮಾಡುತ್ತವೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
focus:outline-none: ಬ್ರೌಸರ್‌ನ ಡಿಫಾಲ್ಟ್ ಫೋಕಸ್ ಔಟ್‌ಲೈನ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ನಾವು ಇದನ್ನು ನಮ್ಮದೇ ಆದ, ಹೆಚ್ಚು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಶೈಲಿಯೊಂದಿಗೆ ಬದಲಾಯಿಸಲು ಹೀಗೆ ಮಾಡುತ್ತೇವೆ.focus:border-sky-500: ಬಾರ್ಡರ್ ಬಣ್ಣವನ್ನು ಪ್ರಕಾಶಮಾನವಾದ ಆಕಾಶ ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.focus:ring-1 focus:ring-sky-500: ಅದೇ ಬಣ್ಣದ ಸೂಕ್ಷ್ಮವಾದ ಹೊರಗಿನ ಹೊಳಪನ್ನು (ಬಾಕ್ಸ್-ಶ್ಯಾಡೋ ರಿಂಗ್) ಸೇರಿಸುತ್ತದೆ, ಇದು ಫೋಕಸ್ ಸ್ಥಿತಿಯನ್ನು ಇನ್ನಷ್ಟು ಎದ್ದುಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ.
active ವೇರಿಯಂಟ್: ಕ್ಲಿಕ್‌ಗಳು ಮತ್ತು ಟ್ಯಾಪ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವುದು
ಬಳಕೆದಾರರಿಂದ ಒಂದು ಎಲಿಮೆಂಟ್ ಸಕ್ರಿಯಗೊಳಿಸಲ್ಪಡುತ್ತಿರುವಾಗ—ಉದಾಹರಣೆಗೆ, ಒಂದು ಬಟನ್ ಒತ್ತಿದಾಗ—active ವೇರಿಯಂಟ್ ಅನ್ವಯವಾಗುತ್ತದೆ. ಕ್ಲಿಕ್ ಅಥವಾ ಟ್ಯಾಪ್ ನೋಂದಾಯಿಸಲ್ಪಟ್ಟಿದೆ ಎಂದು ಇದು ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುತ್ತದೆ.
ಉದಾಹರಣೆ: "ಒತ್ತಿದ" ಪರಿಣಾಮವಿರುವ ಬಟನ್
<button class="bg-indigo-500 text-white font-semibold py-2 px-4 rounded-lg
shadow-md hover:bg-indigo-600 focus:outline-none
focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75
active:bg-indigo-700 active:translate-y-0.5">
Submit
</button>
ಈ ವರ್ಧಿತ ಬಟನ್‌ನಲ್ಲಿ:
active:bg-indigo-700ಬಟನ್ ಒತ್ತಿದಾಗ ಅದನ್ನು ಇನ್ನಷ್ಟು ಗಾಢವಾಗಿಸುತ್ತದೆ.active:translate-y-0.5ಬಟನ್ ಅನ್ನು ಸ್ವಲ್ಪ ಕೆಳಗೆ ತಳ್ಳುತ್ತದೆ, ಭೌತಿಕವಾಗಿ ಒತ್ತಿದ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
ಇತರ ಸಂವಾದಾತ್ಮಕ ವೇರಿಯಂಟ್‌ಗಳು: focus-within ಮತ್ತು focus-visible
focus-within: ಈ ಉಪಯುಕ್ತ ವೇರಿಯಂಟ್, ಒಂದು *ಪೋಷಕ* ಎಲಿಮೆಂಟ್‌ನ ಯಾವುದಾದರೂ *ಮಗು* ಎಲಿಮೆಂಟ್‌ಗೆ ಫೋಕಸ್ ಬಂದಾಗ ಆ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ಗೆ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಅದರ ಇನ್‌ಪುಟ್‌ನೊಂದಿಗೆ ಸಂವಾದ ನಡೆಸುತ್ತಿರುವಾಗ ಇಡೀ ಫಾರ್ಮ್ ಗುಂಪನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
<div class="flex items-center space-x-2 p-4 border rounded-lg focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
<!-- SVG Icon -->
<svg class="h-6 w-6 text-gray-400">...</svg>
<input type="text" placeholder="Search..." class="outline-none">
</div>
ಈಗ, ಬಳಕೆದಾರರು <input> ಮೇಲೆ ಫೋಕಸ್ ಮಾಡಿದಾಗ, ಇಡೀ ಪೋಷಕ <div> ನೀಲಿ ಬಾರ್ಡರ್ ಮತ್ತು ರಿಂಗ್ ಅನ್ನು ಪಡೆಯುತ್ತದೆ.
focus-visible: ಫೋಕಸ್ ರಿಂಗ್ ಅನ್ನು ಯಾವಾಗ ತೋರಿಸಬೇಕು ಎಂಬುದರ ಕುರಿತು ಬ್ರೌಸರ್‌ಗಳು ವಿಭಿನ್ನ ಹ್ಯೂರಿಸ್ಟಿಕ್‌ಗಳನ್ನು ಹೊಂದಿವೆ. ಉದಾಹರಣೆಗೆ, ಮೌಸ್ ಕ್ಲಿಕ್ ನಂತರ ಅವರು ಬಟನ್ ಮೇಲೆ ಅದನ್ನು ತೋರಿಸದಿರಬಹುದು, ಆದರೆ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ನಂತರ ತೋರಿಸುತ್ತಾರೆ. focus-visible ವೇರಿಯಂಟ್ ಈ ಸ್ಮಾರ್ಟ್ ನಡವಳಿಕೆಯನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಮೌಸ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಔಟ್‌ಲೈನ್/ರಿಂಗ್ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ focus ಬದಲಿಗೆ focus-visible ಅನ್ನು ಬಳಸಲು ಸಾಮಾನ್ಯವಾಗಿ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ.
ಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲಿಂಗ್: ಫಾರ್ಮ್ ಮತ್ತು UI ಎಲಿಮೆಂಟ್ ವೇರಿಯಂಟ್‌ಗಳು
ನೇರ ಬಳಕೆದಾರ ಸಂವಾದದ ಹೊರತಾಗಿ, ಎಲಿಮೆಂಟ್‌ಗಳು ತಮ್ಮ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಆಧರಿಸಿ ಸ್ಥಿತಿಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಈ ಸ್ಥಿತಿಗಳನ್ನು ಘೋಷಣಾತ್ಮಕವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಲು Tailwind ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
disabled ವೇರಿಯಂಟ್: ಅಲಭ್ಯತೆಯನ್ನು ಸಂವಹನಿಸುವುದು
ಒಂದು ಬಟನ್ ಅಥವಾ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ disabled ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವಾಗ, ಅದರೊಂದಿಗೆ ಸಂವಾದ ನಡೆಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಬಳಕೆದಾರರಿಗೆ ಇದನ್ನು ದೃಷ್ಟಿ ಸ್ಪಷ್ಟವಾಗಿ ತಿಳಿಸಲು ಈ ಸ್ಥಿತಿಯನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು disabled ವೇರಿಯಂಟ್ ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.
<button disabled class="bg-slate-300 text-slate-500 font-bold py-2 px-4 rounded cursor-not-allowed
disabled:opacity-50">
Processing...
</button>
ಇಲ್ಲಿ, disabled ಗುಣಲಕ್ಷಣವು ಇದ್ದಾಗ disabled:opacity-50 ಬಟನ್‌ನ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದು ನಿಷ್ಕ್ರಿಯ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸುವ ಒಂದು ಸಾಮಾನ್ಯ ಪದ್ಧತಿಯಾಗಿದೆ. cursor-not-allowed ಯುಟಿಲಿಟಿಯು ಇದನ್ನು ಮತ್ತಷ್ಟು ಬಲಪಡಿಸುತ್ತದೆ.
checked ವೇರಿಯಂಟ್: ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೋ ಬಟನ್‌ಗಳಿಗಾಗಿ
ಕಸ್ಟಮ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೋ ಬಟನ್‌ಗಳನ್ನು ರಚಿಸಲು checked ವೇರಿಯಂಟ್ ಅತ್ಯಗತ್ಯ. ಇನ್‌ಪುಟ್‌ನ checked ಗುಣಲಕ್ಷಣವು true ಆಗಿರುವಾಗ ಇದು ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಕಸ್ಟಮ್ ಸ್ಟೈಲ್ ಮಾಡಿದ ಚೆಕ್‌ಬಾಕ್ಸ್
<label class="flex items-center space-x-3">
<input type="checkbox" class="appearance-none h-5 w-5 border border-gray-300 rounded-md
checked:bg-blue-600 checked:border-transparent">
<span class="text-gray-900 font-medium">Accept terms and conditions</span>
</label>
ನಾವು ಬ್ರೌಸರ್‌ನ ಡಿಫಾಲ್ಟ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು appearance-none ಅನ್ನು ಬಳಸುತ್ತೇವೆ, ಮತ್ತು ನಂತರ ಬಾಕ್ಸ್ ಚೆಕ್ ಮಾಡಿದಾಗ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು checked: ವೇರಿಯಂಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ನೀವು ಈ ವೇರಿಯಂಟ್‌ನೊಂದಿಗೆ ::before ಅಥವಾ ::after ಸೂಡೊ-ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ ಚೆಕ್‌ಮಾರ್ಕ್ ಐಕಾನ್ ಅನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು.
ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ ವೇರಿಯಂಟ್‌ಗಳು: required, optional, valid, invalid
ಆಧುನಿಕ ಫಾರ್ಮ್‌ಗಳು ನೈಜ-ಸಮಯದ ಮೌಲ್ಯೀಕರಣ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. Tailwind ನ ಮೌಲ್ಯೀಕರಣ ವೇರಿಯಂಟ್‌ಗಳು ಬ್ರೌಸರ್‌ನ ನಿರ್ಬಂಧ ಮೌಲ್ಯೀಕರಣ API ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ. ಈ ವೇರಿಯಂಟ್‌ಗಳು required ನಂತಹ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್ ಮೌಲ್ಯದ ಪ್ರಸ್ತುತ ಸಿಂಧುತ್ವ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಅನ್ವಯವಾಗುತ್ತವೆ (ಉದಾ., type="email" ಗಾಗಿ).
<input type="email" required
class="border rounded-md px-3 py-2
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500
valid:border-green-500">
ಈ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಹೀಗಿರುತ್ತದೆ:
- ವಿಷಯವು ಮಾನ್ಯ ಇಮೇಲ್ ವಿಳಾಸವಾಗಿಲ್ಲದಿದ್ದರೆ ಗುಲಾಬಿ ಬಣ್ಣದ ಬಾರ್ಡರ್ ಮತ್ತು ಟೆಕ್ಸ್ಟ್ ಇರುತ್ತದೆ (
invalid:). - ಒಂದು ಮಾನ್ಯ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿದ ನಂತರ ಹಸಿರು ಬಾರ್ಡರ್ ಇರುತ್ತದೆ (
valid:). - ಫೀಲ್ಡ್ ಅಮಾನ್ಯವಾಗಿದ್ದಾಗ ಫೋಕಸ್ ಮಾಡಿದರೆ ಫೋಕಸ್ ರಿಂಗ್ ಕೂಡ ಗುಲಾಬಿ ಬಣ್ಣಕ್ಕೆ ತಿರುಗುತ್ತದೆ (
focus:invalid:).
ಸುಧಾರಿತ ಸಂವಾದಾತ್ಮಕತೆ: `group` ಮತ್ತು `peer` ವೇರಿಯಂಟ್‌ಗಳು
ಕೆಲವೊಮ್ಮೆ, ನೀವು *ಬೇರೆ* ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ ಶಕ್ತಿಶಾಲಿ group ಮತ್ತು peer ಪರಿಕಲ್ಪನೆಗಳು ಕಾರ್ಯರೂಪಕ್ಕೆ ಬರುತ್ತವೆ. ಇವು ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳಿಂದ ಮಾತ್ರ ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾಗಿದ್ದ UI ಸವಾಲುಗಳ ಒಂದು ಸಂಪೂರ್ಣ ವರ್ಗವನ್ನು ಪರಿಹರಿಸುತ್ತವೆ.
`group` ನ ಶಕ್ತಿ: ಪೋಷಕ ಸ್ಥಿತಿಯ ಮೇಲೆ ಮಕ್ಕಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
group ವೇರಿಯಂಟ್ ಒಂದು ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಮಗು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ನೀವು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಬಯಸುವ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ಗೆ group ಕ್ಲಾಸ್ ಅನ್ನು ಸೇರಿಸುತ್ತೀರಿ. ನಂತರ, ಯಾವುದೇ ಮಗು ಎಲಿಮೆಂಟ್‌ನ ಮೇಲೆ, ನೀವು group-hover, group-focus, ಇತ್ಯಾದಿ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
ಉದಾಹರಣೆ: ಹೋವರ್ ಮೇಲೆ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಐಕಾನ್ ಒಟ್ಟಿಗೆ ಬಣ್ಣ ಬದಲಾಯಿಸುವ ಕಾರ್ಡ್
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3
hover:bg-sky-500 hover:ring-sky-500">
<div class="flex items-center space-x-3">
<!-- SVG Icon -->
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white">...</svg>
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New Project</h3>
</div>
<p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of templates.</p>
</a>
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:
- ನಾವು ಪೋಷಕ
<a>ಟ್ಯಾಗ್‌ಗೆgroupಕ್ಲಾಸ್ ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ. - ಬಳಕೆದಾರರು ಸಂಪೂರ್ಣ ಲಿಂಕ್‌ನ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ,
hover:bg-sky-500ಗೆ ಧನ್ಯವಾದಗಳು, ಅದರ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಬದಲಾಗುತ್ತದೆ. - ಅದೇ ಸಮಯದಲ್ಲಿ, SVG ಮೇಲಿನ
group-hover:stroke-whiteಕ್ಲಾಸ್ ಮತ್ತು ಟೆಕ್ಸ್ಟ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲಿನgroup-hover:text-whiteಸಕ್ರಿಯಗೊಳ್ಳುತ್ತವೆ, ಅವುಗಳ ಬಣ್ಣಗಳನ್ನು ಬಿಳಿಗೆ ಬದಲಾಯಿಸುತ್ತವೆ.
ಇದು ಒಂದು ಸುಸಂಬದ್ಧ, ಸಮಗ್ರ ಹೋವರ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಇಲ್ಲದಿದ್ದರೆ ಇದಕ್ಕೆ ಕಸ್ಟಮ್ CSS ಅಥವಾ JavaScript ಬೇಕಾಗುತ್ತಿತ್ತು.
`peer` ನೊಂದಿಗೆ ಒಡಹುಟ್ಟಿದವರ ಸ್ಟೈಲಿಂಗ್: ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ ಒಂದು ಗೇಮ್-ಚೇಂಜರ್
peer ವೇರಿಯಂಟ್ group ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಇದು ಸಹೋದರ (sibling) ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಕೆಲಸ ಮಾಡುತ್ತದೆ. ನೀವು ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ peer ಕ್ಲಾಸ್ ಅನ್ನು ಸೇರಿಸುತ್ತೀರಿ, ಮತ್ತು ನಂತರ "ಪೀರ್" ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ *ನಂತರದ* ಸಹೋದರ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು peer-checked ಅಥವಾ peer-invalid ನಂತಹ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ಅದರೊಂದಿಗೆ ಸಂಯೋಜಿತವಾದ ಚೆಕ್‌ಬಾಕ್ಸ್ ಚೆಕ್ ಮಾಡಿದಾಗ ಬದಲಾಗುವ ಲೇಬಲ್
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 rounded-full
peer-focus:ring-4 peer-focus:ring-blue-300
peer-checked:after:translate-x-full peer-checked:after:border-white
after:content-[''] after:absolute after:top-0.5 after:left-[2px]
after:bg-white after:border-gray-300 after:border after:rounded-full
after:h-5 after:w-5 after:transition-all
peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 peer-checked:text-blue-600">
Enable Notifications
</span>
</label>
ಇದು ಶೂನ್ಯ JavaScript ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಸಂಪೂರ್ಣ, ಪ್ರವೇಶಿಸಬಹುದಾದ ಟಾಗಲ್ ಸ್ವಿಚ್ ಆಗಿದೆ!
- ನೈಜ ಚೆಕ್‌ಬಾಕ್ಸ್
<input>ಅನ್ನುsr-onlyನೊಂದಿಗೆ ದೃಷ್ಟಿಯಿಂದ ಮರೆಮಾಡಲಾಗಿದೆ (ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಇನ್ನೂ ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ) ಮತ್ತುpeerಎಂದು ಗುರುತಿಸಲಾಗಿದೆ. - ದೃಶ್ಯ ಟಾಗಲ್ ಸ್ವಿಚ್ ಒಂದು
<div>ಆಗಿದ್ದು, ಅದನ್ನು ಹ್ಯಾಂಡಲ್‌ನೊಂದಿಗೆ ಟ್ರ್ಯಾಕ್‌ನಂತೆ ಕಾಣುವಂತೆ ಸ್ಟೈಲ್ ಮಾಡಲಾಗಿದೆ (::afterಸೂಡೊ-ಎಲಿಮೆಂಟ್ ಬಳಸಿ). - ಮರೆಮಾಡಿದ ಚೆಕ್‌ಬಾಕ್ಸ್ ಚೆಕ್ ಮಾಡಿದಾಗ
peer-checked:bg-blue-600ಟ್ರ್ಯಾಕ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. - ಚೆಕ್‌ಬಾಕ್ಸ್ ಚೆಕ್ ಮಾಡಿದಾಗ
peer-checked:after:translate-x-fullಹ್ಯಾಂಡಲ್ ಅನ್ನು ಬಲಕ್ಕೆ ಜಾರಿಸುತ್ತದೆ. peer-checked:text-blue-600ಸಹೋದರ<span>ಲೇಬಲ್ ಟೆಕ್ಸ್ಟ್‌ನ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
ಹೆಚ್ಚು ನಿಖರವಾದ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು
Tailwind ನ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದು ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಜೋಡಿಸುವ ಸಾಮರ್ಥ್ಯ. ಇದು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಷರತ್ತುಬದ್ಧ ಶೈಲಿಗಳನ್ನು ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಸ್ಟೇಟ್ ವೇರಿಯಂಟ್‌ಗಳು: ಡೈನಾಮಿಕ್ ಜೋಡಿ
ನೀವು ರೆಸ್ಪಾನ್ಸಿವ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು (md:, lg: ನಂತಹ) ಸ್ಟೇಟ್ ವೇರಿಯಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ, ನಿರ್ದಿಷ್ಟ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ *ಮತ್ತು* ನಿರ್ದಿಷ್ಟ ಸ್ಥಿತಿಗಳಲ್ಲಿ ಮಾತ್ರ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ರೆಸ್ಪಾನ್ಸಿವ್ ವೇರಿಯಂಟ್ ಯಾವಾಗಲೂ ಮೊದಲು ಬರುತ್ತದೆ.
ಸಿಂಟ್ಯಾಕ್ಸ್: breakpoint:state:utility-class
<button class="bg-blue-500 text-white p-2 rounded
hover:bg-blue-600
md:bg-green-500 md:hover:bg-green-600">
Responsive Button
</button>
ಈ ಬಟನ್:
- ಸಣ್ಣ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ನೀಲಿ ಬಣ್ಣದಲ್ಲಿರುತ್ತದೆ, ಹೋವರ್ ಮೇಲೆ ಗಾಢ ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ತಿರುಗುತ್ತದೆ.
- ಮಧ್ಯಮ ಸ್ಕ್ರೀನ್‌ಗಳು ಮತ್ತು ಅದಕ್ಕಿಂತ ದೊಡ್ಡದರಲ್ಲಿ ಹಸಿರು ಬಣ್ಣದಲ್ಲಿರುತ್ತದೆ (
md:bg-green-500), ಹೋವರ್ ಮೇಲೆ ಗಾಢ ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ತಿರುಗುತ್ತದೆ (md:hover:bg-green-600).
ಬಹು ಸ್ಟೇಟ್ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಸೇರಿಸುವುದು
ಎಲ್ಲಾ ಷರತ್ತುಗಳು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಬಹು ಸ್ಟೇಟ್ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಕೂಡ ಜೋಡಿಸಬಹುದು. ಇದು ಸಂವಾದಗಳನ್ನು ಸೂಕ್ಷ್ಮವಾಗಿ-ಟ್ಯೂನ್ ಮಾಡಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್‌ಗೆ ವಿಭಿನ್ನವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಡಾರ್ಕ್ ಮೋಡ್ ಬಟನ್
<button class="p-2 rounded-full text-gray-400
dark:text-gray-500
hover:text-gray-600 dark:hover:text-gray-300
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400
dark:hover:focus:ring-gray-200">
<!-- Icon here -->
</button>
ಇಲ್ಲಿ, dark:hover:focus:ring-gray-200 ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ, ಬಟನ್ ಹೋವರ್ ಆಗುತ್ತಿರುವಾಗ, *ಮತ್ತು* ಅದು ಫೋಕಸ್ ಹೊಂದಿರುವಾಗ ಮಾತ್ರ ನಿರ್ದಿಷ್ಟ ರಿಂಗ್ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಸ್ಟೇಟ್ ವೇರಿಯಂಟ್‌ಗಳ ಕ್ರಮವು ಸಾಮಾನ್ಯವಾಗಿ ಮುಖ್ಯವಲ್ಲ, ಏಕೆಂದರೆ Tailwind ಸಂಯೋಜನೆಗಾಗಿ ಸರಿಯಾದ CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
ಕಸ್ಟಮೈಸೇಶನ್ ಮತ್ತು ಒಂದು ಬಾರಿಯ ಬಳಕೆಗಳು
Tailwind ಬಾಕ್ಸ್‌ನಿಂದ ಹೊರಗೆ ಸಮಗ್ರ ವೇರಿಯಂಟ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಒದಗಿಸಿದರೂ, ಕೆಲವೊಮ್ಮೆ ನಿಮಗೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣ ಬೇಕಾಗುತ್ತದೆ.
ಸ್ವತಂತ್ರ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಬಳಸುವುದು (Arbitrary Variants)
ಅಂತರ್ನಿರ್ಮಿತ ವೇರಿಯಂಟ್‌ನಿಂದ ಆವರಿಸದ CSS ಸೆಲೆಕ್ಟರ್ ಅಗತ್ಯವಿರುವ ಒಂದು-ಬಾರಿಯ ಸಂದರ್ಭಗಳಿಗಾಗಿ, ನೀವು ಸ್ವತಂತ್ರ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ನಿಮ್ಮ ಕ್ಲಾಸ್ ಗುಣಲಕ್ಷಣದಲ್ಲಿ ನೇರವಾಗಿ ಕಸ್ಟಮ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬರೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಎಸ್ಕೇಪ್ ಹ್ಯಾಚ್ ಆಗಿದೆ, ಇದನ್ನು ಚೌಕ ಆವರಣಗಳಲ್ಲಿ ಸುತ್ತುವರಿಯಲಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ: ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ವಿಭಿನ್ನವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡುವುದು
<ul>
<li class="[&:nth-child(odd)]:bg-gray-100 p-2">First item</li>
<li class="[&:nth-child(odd)]:bg-gray-100 p-2">Second item</li>
<li class="[&:nth-child(odd)]:bg-gray-100 p-2">Third item</li>
</ul>
[&:nth-child(odd)]:bg-gray-100 ಕ್ಲಾಸ್ li:nth-child(odd) ಗಾಗಿ CSS ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಪ್ರತಿ ಐಟಂಗೆ ಹೆಚ್ಚುವರಿ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಸೇರಿಸದೆಯೇ ಪಟ್ಟೆ ಪಟ್ಟಿಯನ್ನು ರಚಿಸುತ್ತದೆ.
ನೇರ ವಂಶಸ್ಥರ (direct descendant) ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ಬಳಕೆಯೆಂದರೆ:
<div class="[&_>_p]:mt-4">
<p>First paragraph.</p>
<p>Second paragraph. This will have a top margin.</p>
<div><p>Nested paragraph. This will NOT have a top margin.</p></div>
</div>
[&_>_p]:mt-4 ಕ್ಲಾಸ್ ಡಿವ್‌ನ ನೇರ p ಮಕ್ಕಳಿಗೆ ಮಾತ್ರ ಸ್ಟೈಲ್ ಮಾಡುತ್ತದೆ.
`tailwind.config.js` ನಲ್ಲಿ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, Tailwind ನ JIT ಇಂಜಿನ್ ಎಲ್ಲಾ ಕೋರ್ ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ ಎಲ್ಲಾ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೀವು ಮೂರನೇ-ಪಕ್ಷದ ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬೇಕಾದರೆ ಅಥವಾ ಕಸ್ಟಮ್ ವೇರಿಯಂಟ್ ಅನ್ನು ನೋಂದಾಯಿಸಲು ಬಯಸಿದರೆ, ನಿಮ್ಮ `tailwind.config.js` ಫೈಲ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.
// tailwind.config.js
module.exports = {
// ...
plugins: [
function({ addVariant }) {
addVariant('child', '& > *');
addVariant('child-hover', '& > *:hover');
}
],
}
ಈ ಕಸ್ಟಮ್ ಪ್ಲಗಿನ್ ಹೊಸ `child` ಮತ್ತು `child-hover` ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ, ನಂತರ ನೀವು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಎಲ್ಲಾ ನೇರ ಮಕ್ಕಳಿಗೆ ಸ್ಟೈಲ್ ಮಾಡಲು child:text-red-500 ನಂತೆ ಬಳಸಬಹುದು.
ತೀರ್ಮಾನ: ಸ್ಟೇಟ್-ಚಾಲಿತ UI ನ ಶಕ್ತಿ
Tailwind CSS ವೇರಿಯಂಟ್‌ಗಳು ಕೇವಲ ಒಂದು ಅನುಕೂಲಕ್ಕಿಂತ ಹೆಚ್ಚು; ಅವು ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ತತ್ವಶಾಸ್ತ್ರದ ಮೂಲಭೂತ ಭಾಗವಾಗಿದೆ. ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಎಲ್ಲಾ ಸಂಭಾವ್ಯ ಸ್ಥಿತಿಗಳಾದ್ಯಂತ ಅದರ ನೋಟವನ್ನು ನೇರವಾಗಿ HTML ನಲ್ಲಿ ವಿವರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ, ವೇರಿಯಂಟ್‌ಗಳು ನಿಮಗೆ ಸಂಕೀರ್ಣ, ದೃಢವಾದ ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
ಸರಳ hover ಪರಿಣಾಮಗಳಿಂದ ಹಿಡಿದು peer-checked ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಸಂಕೀರ್ಣ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್, ಬಹು-ಸ್ಥಿತಿ ಸಂಯೋಜನೆಗಳವರೆಗೆ, ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಜೀವ ತುಂಬಲು ನೀವು ಈಗ ಒಂದು ಸಮಗ್ರ ಟೂಲ್‌ಕಿಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಅವು ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಮನಸ್ಥಿತಿಯನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತವೆ, ಅಲ್ಲಿ ಎಲ್ಲಾ ತರ್ಕ—ರಚನೆ, ಶೈಲಿ, ಮತ್ತು ಸ್ಥಿತಿ—ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಸಂಕ್ಷಿಪ್ತವಾಗಿರುತ್ತದೆ.
ನಾವು ಅಗತ್ಯಗಳನ್ನು ಆವರಿಸಿದ್ದೇವೆ ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಿದ್ದೇವೆ, ಆದರೆ ಪ್ರಯಾಣ ಇಲ್ಲಿಗೆ ಮುಗಿಯುವುದಿಲ್ಲ. ವೇರಿಯಂಟ್‌ಗಳಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಪಡೆಯಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಅವುಗಳನ್ನು ಬಳಸುವುದು. ಅವುಗಳನ್ನು ಸಂಯೋಜಿಸುವುದರೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ಅಧಿಕೃತ Tailwind CSS ದಸ್ತಾವೇಜಿನಲ್ಲಿ ಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು ಅನ್ವೇಷಿಸಿ, ಮತ್ತು ಕಸ್ಟಮ್ CSS ಅಥವಾ JavaScript ಗೆ ಮೊರೆ ಹೋಗದೆ ಸಂವಾದಾತ್ಮಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮ್ಮನ್ನು ಸವಾಲು ಮಾಡಿ. ಸ್ಟೇಟ್-ಚಾಲಿತ ಸ್ಟೈಲಿಂಗ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ನೀವು ವೇಗವಾಗಿ, ಹೆಚ್ಚು ಸ್ಥಿರವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸಂತೋಷಕರ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.