Tailwind CSS ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್: CSS-ಇನ್-ಯುಟಿಲಿಟಿಗಾಗಿ ಅಂತಿಮ ಮಾರ್ಗದರ್ಶಿ

Tailwind CSS ನಾವು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಅನ್ನು ಸಮೀಪಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದೆ. ಇದರ ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ವಿಧಾನವು ನೇರವಾಗಿ ಮಾರ್ಕಪ್‌ನಲ್ಲಿ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸುವ ಮೂಲಕ ವೇಗದ ಪ್ರೊಟೋಟೈಪಿಂಗ್, ಸ್ಥಿರವಾದ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು, ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಕೋಡ್‌ಬೇಸ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಅತ್ಯಂತ ವ್ಯಾಪಕವಾದ ಯುಟಿಲಿಟಿ ಲೈಬ್ರರಿಯು ಕೂಡ ಪ್ರತಿಯೊಂದು ಸಂಭವನೀಯ ವಿನ್ಯಾಸದ ಅವಶ್ಯಕತೆಯನ್ನು ಊಹಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಡಿಸೈನರ್‌ನಿಂದ ಒದಗಿಸಲಾದ margin-top: 13px ನಂತಹ ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯ ಅಥವಾ ಒಂದು ಅನನ್ಯ clip-path ಬೇಕಾದಾಗ ಏನು ಮಾಡಬೇಕು? ನೀವು ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ವರ್ಕ್‌ಫ್ಲೋವನ್ನು ತ್ಯಜಿಸಿ ಪ್ರತ್ಯೇಕ CSS ಫೈಲ್‌ಗೆ ಹಿಂತಿರುಗಬೇಕೇ?

ಐತಿಹಾಸಿಕವಾಗಿ, ಇದು ಒಂದು ಮಾನ್ಯವಾದ ಕಳವಳವಾಗಿತ್ತು. ಆದರೆ ಜಸ್ಟ್-ಇನ್-ಟೈಮ್ (JIT) ಕಂಪೈಲರ್‌ನ ಆಗಮನದೊಂದಿಗೆ, Tailwind ಒಂದು ಗೇಮ್-ಚೇಂಜಿಂಗ್ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಪರಿಚಯಿಸಿತು: ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ (arbitrary properties). ಈ ಶಕ್ತಿಯುತ ವ್ಯವಸ್ಥೆಯು ಒಂದು ಸುಲಭವಾದ ಪಾರುಗಾಣಿಕಾ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ನಿಮಗೆ ಬೇಕಾದ ಯಾವುದೇ CSS ಮೌಲ್ಯವನ್ನು ನಿಮ್ಮ ಕ್ಲಾಸ್ ಪಟ್ಟಿಯಲ್ಲಿ ನೇರವಾಗಿ ಬಳಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ವ್ಯವಸ್ಥಿತ ಯುಟಿಲಿಟಿ ಫ್ರೇಮ್‌ವರ್ಕ್ ಮತ್ತು ಕಚ್ಚಾ CSS ನ ಅನಂತ ನಮ್ಯತೆಯ ಪರಿಪೂರ್ಣ ಸಮ್ಮಿಳನವಾಗಿದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ನಿಮ್ಮನ್ನು ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಜಗತ್ತಿನಲ್ಲಿ ಆಳವಾಗಿ ಕೊಂಡೊಯ್ಯುತ್ತದೆ. ಅವು ಯಾವುವು, ಅವು ಏಕೆ ಅಷ್ಟು ಶಕ್ತಿಯುತವಾಗಿವೆ, ಮತ್ತು ನಿಮ್ಮ HTML ಅನ್ನು ಬಿಡದೆಯೇ ನೀವು ಕಲ್ಪಿಸಿಕೊಳ್ಳಬಹುದಾದ ಯಾವುದನ್ನಾದರೂ ನಿರ್ಮಿಸಲು ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.

Tailwind CSS ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಎಂದರೇನು?

ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ Tailwind CSS ನಲ್ಲಿನ ಒಂದು ವಿಶೇಷ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದ್ದು, ಇದು ನಿಮಗೆ ಕಸ್ಟಮ್ ಮೌಲ್ಯದೊಂದಿಗೆ ಹಾರಾಡುತ್ತಲೇ (on the fly) ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್ ಅನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ನಿಮ್ಮ tailwind.config.js ಫೈಲ್‌ನಲ್ಲಿ ಪೂರ್ವ-ನಿರ್ಧರಿತ ಮೌಲ್ಯಗಳಿಗೆ ಸೀಮಿತವಾಗಿರುವುದರ ಬದಲು (ಉದಾಹರಣೆಗೆ p-4 ಗಾಗಿ padding: 1rem), ನೀವು ಬಯಸುವ ನಿಖರವಾದ CSS ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳವಾಗಿದೆ ಮತ್ತು ಚೌಕ ಆವರಣಗಳಲ್ಲಿ (square brackets) ಸುತ್ತುವರಿಯಲ್ಪಟ್ಟಿದೆ:

[property:value]

ಒಂದು ಶ್ರೇಷ್ಠ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ. ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಮೇಲಿನಿಂದ ನಿಖರವಾಗಿ 117 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಇರಿಸಬೇಕಾಗಿದೆ ಎಂದು ಭಾವಿಸೋಣ. Tailwind ನ ಡೀಫಾಲ್ಟ್ ಸ್ಪೇಸಿಂಗ್ ಸ್ಕೇಲ್‌ನಲ್ಲಿ '117px' ಗಾಗಿ ಯುಟಿಲಿಟಿ ಇರಲಿಕ್ಕಿಲ್ಲ. ಕಸ್ಟಮ್ ಕ್ಲಾಸ್ ರಚಿಸುವ ಬದಲು, ನೀವು ಹೀಗೆ ಬರೆಯಬಹುದು:

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

ತೆರೆಮರೆಯಲ್ಲಿ, Tailwind ನ JIT ಕಂಪೈಲರ್ ಇದನ್ನು ನೋಡುತ್ತದೆ ಮತ್ತು ಮಿಲಿಸೆಕೆಂಡುಗಳಲ್ಲಿ, ನಿಮಗಾಗಿ ಅನುಗುಣವಾದ CSS ಕ್ಲಾಸ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ:

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

ಈ ಸರಳವಾದರೂ ಗಹನವಾದ ವೈಶಿಷ್ಟ್ಯವು ಸಂಪೂರ್ಣವಾಗಿ ಯುಟಿಲಿಟಿ-ಚಾಲಿತ ವರ್ಕ್‌ಫ್ಲೋಗೆ ಅಂತಿಮ ತಡೆಗೋಡೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ತೆಗೆದುಹಾಕುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಜಾಗತಿಕ ಥೀಮ್‌ಗೆ ಸೇರದ ಆ ಒನ್-ಆಫ್ ಸ್ಟೈಲ್‌ಗಳಿಗೆ ತಕ್ಷಣದ, ಇನ್‌ಲೈನ್ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ, ನೀವು ಕೆಲಸದ ಹರಿವಿನಲ್ಲಿ ಉಳಿಯಲು ಮತ್ತು ವೇಗವನ್ನು ಕಾಯ್ದುಕೊಳ್ಳಲು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಏಕೆ ಮತ್ತು ಯಾವಾಗ ಬಳಸಬೇಕು

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಒಂದು ಅಸಾಧಾರಣ ಸಾಧನವಾಗಿದೆ, ಆದರೆ ಯಾವುದೇ ಶಕ್ತಿಯುತ ಸಾಧನದಂತೆ, ಅವುಗಳನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು ಮತ್ತು ಯಾವಾಗ ನಿಮ್ಮ ಕಾನ್ಫಿಗರ್ ಮಾಡಿದ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗೆ ಅಂಟಿಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸುವುದರಿಂದ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ನಮ್ಯತೆ ಮತ್ತು ನಿರ್ವಹಣಾ ಸಾಮರ್ಥ್ಯ ಎರಡನ್ನೂ ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗಾಗಿ ಆದರ್ಶ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

• ಒನ್-ಆಫ್ ಸ್ಟೈಲ್‌ಗಳು: ಇದು ಪ್ರಾಥಮಿಕ ಮತ್ತು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಬಳಕೆಯಾಗಿದೆ. ಒಂದೇ ಎಲಿಮೆಂಟ್‌ಗೆ ವಿಶಿಷ್ಟವಾದ ಮತ್ತು ಮರುಬಳಕೆಯಾಗುವ ಸಾಧ್ಯತೆಯಿಲ್ಲದ ಸ್ಟೈಲ್ ನಿಮ್ಮಲ್ಲಿದ್ದಾಗ, ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟಿ ಪರಿಪೂರ್ಣ ಪರಿಹಾರವಾಗಿದೆ. ಉದಾಹರಣೆಗಳಲ್ಲಿ ತಾತ್ಕಾಲಿಕ ಮೋಡಲ್‌ಗಾಗಿ ನಿರ್ದಿಷ್ಟ z-index, ಅಲಂಕಾರಿಕ ಎಲಿಮೆಂಟ್‌ಗಾಗಿ ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ ಸ್ಥಾನ, ಅಥವಾ ಹೀರೋ ವಿಭಾಗಕ್ಕಾಗಿ ಕಸ್ಟಮ್ ಗ್ರೇಡಿಯಂಟ್ ಸೇರಿವೆ.
• ಪ್ರೊಟೋಟೈಪಿಂಗ್ ಮತ್ತು ಪ್ರಯೋಗ: ನೀವು ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಸೃಜನಾತ್ಮಕ ಹಂತದಲ್ಲಿದ್ದಾಗ, ನೀವು ಮೌಲ್ಯಗಳೊಂದಿಗೆ ತ್ವರಿತವಾಗಿ ಪ್ರಯೋಗ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಅದ್ಭುತವಾದ ಫೀಡ್‌ಬ್ಯಾಕ್ ಲೂಪ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ. ನೀವು ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಅಗಲ, ಬಣ್ಣ, ಅಥವಾ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಕಾನ್ಫಿಗ್ ಫೈಲ್ ಅನ್ನು ನಿರಂತರವಾಗಿ ರಿಕಂಪೈಲ್ ಮಾಡದೆ ಅಥವಾ ಎಡಿಟ್ ಮಾಡದೆ ಫಲಿತಾಂಶಗಳನ್ನು ತಕ್ಷಣವೇ ನೋಡಬಹುದು.
• ಡೈನಾಮಿಕ್ ಡೇಟಾದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು: ಬ್ಯಾಕೆಂಡ್ ಸಿಸ್ಟಮ್, CMS, ಅಥವಾ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ನಿಂದ ಮೌಲ್ಯಗಳು ಬರುತ್ತಿರುವಾಗ, ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಅನಿವಾರ್ಯ. ಉದಾಹರಣೆಗೆ, ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಶೇಕಡಾವಾರು ಆಧಾರದ ಮೇಲೆ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು ಅತ್ಯಲ್ಪವಾಗಿದೆ.
  <div class="h-2 bg-blue-500 w-[{{ progressPercentage }}%]'></div>
• ಆಧುನಿಕ ಅಥವಾ ವಿಶಿಷ್ಟ CSS ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸುವುದು: CSS ಜಗತ್ತು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ. Tailwind ಇನ್ನೂ ಮೀಸಲಾದ ಯುಟಿಲಿಟಿಗಳನ್ನು ಹೊಂದಿರದ ಹೊಸ ಅಥವಾ ಪ್ರಾಯೋಗಿಕ ಪ್ರಾಪರ್ಟೀಸ್ ಇರಬಹುದು. ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ನಿಮಗೆ scroll-snap-type, container-type, ಅಥವಾ ಸುಧಾರಿತ mask-image ಪರಿಣಾಮಗಳಂತಹ ಇಡೀ CSS ಭಾಷೆಗೆ ತಕ್ಷಣದ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ.

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಯಾವಾಗ ತಪ್ಪಿಸಬೇಕು

ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ಬದಲಿಸಬಾರದು. Tailwind ನ ಮೂಲ ಶಕ್ತಿಯು ನಿಮ್ಮ 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]"

ಇದು ನೆನಪಿಡಬೇಕಾದ ಒಂದು ನಿರ್ಣಾಯಕ ನಿಯಮವಾಗಿದೆ. ಅಂತಿಮ CSS ಅನ್ನು ರಚಿಸುವಾಗ JIT ಕಂಪೈಲರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಂಡರ್‌ಸ್ಕೋರ್‌ಗಳನ್ನು ಮತ್ತೆ ಸ್ಪೇಸ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.

CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್) ಬಳಸುವುದು

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ CSS ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ಪ್ರಥಮ ದರ್ಜೆಯ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ, ಇದು ಡೈನಾಮಿಕ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಸ್ಕೋಪ್ಡ್ ಥೀಮಿಂಗ್‌ಗೆ ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ.

ನೀವು CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು ಮತ್ತು ಬಳಸಬಹುದು:

• ವೇರಿಯೇಬಲ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು: [--variable-name:value] ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ.
• ವೇರಿಯೇಬಲ್ ಅನ್ನು ಬಳಸುವುದು: ಮತ್ತೊಂದು ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟಿಯೊಳಗೆ ಪ್ರಮಾಣಿತ var(--variable-name) CSS ಫಂಕ್ಷನ್ ಬಳಸಿ.

ಪೋಷಕನ ಥೀಮ್ ಬಣ್ಣವನ್ನು ಗೌರವಿಸುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಲು ಇಲ್ಲಿ ಒಂದು ಶಕ್ತಿಯುತ ಉದಾಹರಣೆ ಇದೆ:

<!-- ಪೋಷಕ ಕಾಂಪೊನೆಂಟ್ ಥೀಮ್ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸುತ್ತದೆ -->
<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()` ನೊಂದಿಗೆ ನಿಮ್ಮ ಥೀಮ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸುವುದು

ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಥೀಮ್‌ನ ಆಧಾರದ ಮೇಲೆ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಕಸ್ಟಮ್ ಮೌಲ್ಯ ನಿಮಗೆ ಬೇಕಾದರೆ ಏನು ಮಾಡಬೇಕು? Tailwind theme() ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದನ್ನು ನೀವು ನಿಮ್ಮ tailwind.config.js ಫೈಲ್‌ನಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಒಳಗೆ ಬಳಸಬಹುದು.

ಕಸ್ಟಮ್ ಲೆಕ್ಕಾಚಾರಗಳಿಗೆ ಅವಕಾಶ ನೀಡುವಾಗಲೂ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಇದು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಪ್ರಮಾಣಿತ ಸೈಡ್‌ಬಾರ್ ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಹೊರತುಪಡಿಸಿ, ಅದರ ಕಂಟೇನರ್‌ನ ಪೂರ್ಣ ಅಗಲವಿರುವ ಎಲಿಮೆಂಟ್ ಅನ್ನು ರಚಿಸಲು:

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

ಇಲ್ಲಿ, theme(spacing.16) ಅನ್ನು ನಿಮ್ಮ ಕಾನ್ಫಿಗ್‌ನಿಂದ `spacing[16]` ನ ನಿಜವಾದ ಮೌಲ್ಯದಿಂದ (ಉದಾ., `4rem`) ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ, ಮತ್ತು Tailwind 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>

ಇಲ್ಲಿ, top-[-4px] ಅನ್ನು ಬಳಸುವುದು, ಒಂದೇ ಬಳಕೆಯ ಪ್ರಕರಣಕ್ಕಾಗಿ .avatar-border-offset ನಂತಹ ಕಸ್ಟಮ್ CSS ಕ್ಲಾಸ್ ಅನ್ನು ರಚಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸ್ವಚ್ಛ ಮತ್ತು ನೇರವಾಗಿದೆ.

ಉದಾಹರಣೆ 2: ಕಸ್ಟಮ್ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳು

ನೀವು ಜಾಗತಿಕ ಸುದ್ದಿ ಲೇಖನ ಪುಟಕ್ಕಾಗಿ ಲೇಔಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ, ಇದಕ್ಕೆ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ ಮತ್ತು ಸ್ಥಿರ ಅಗಲದ ಸೈಡ್‌ಬಾರ್ ಅಗತ್ಯವಿದೆ.

<div class="grid grid-cols-[1fr_300px] gap-8">
  <main>... ಮುಖ್ಯ ಲೇಖನದ ವಿಷಯ ...</main>
  <aside>... ಜಾಹೀರಾತುಗಳು ಅಥವಾ ಸಂಬಂಧಿತ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ಸೈಡ್‌ಬಾರ್ ...</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">ಹೊಸ ಉತ್ಪನ್ನ ಬಿಡುಗಡೆ!</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 ನ ಸಂಪೂರ್ಣ ಶಕ್ತಿಗೆ ತಕ್ಷಣದ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ.

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ಮಾಡಿಫೈಯರ್‌ಗಳು

ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳ ಅತ್ಯಂತ ಸೊಗಸಾದ ಅಂಶವೆಂದರೆ ಅವು Tailwind ನ ಶಕ್ತಿಯುತ ಮಾಡಿಫೈಯರ್ ಸಿಸ್ಟಮ್‌ನೊಂದಿಗೆ ತಡೆರಹಿತವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುವುದು. ನೀವು ಯಾವುದೇ ವೇರಿಯಂಟ್ ಅನ್ನು — hover:, focus:, md:, ಅಥವಾ dark: ನಂತಹ — ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟಿಗೆ, ಪ್ರಮಾಣಿತ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ನೊಂದಿಗೆ ಮಾಡುವಂತೆಯೇ, ಪೂರ್ವಪ್ರತ್ಯಯವಾಗಿ ಸೇರಿಸಬಹುದು.

ಇದು ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಇಂಟರಾಕ್ಟಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ.

• ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್: ನಿರ್ದಿಷ್ಟ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಲ್ಲಿ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಿ.
class="w-[100%] md:w-[50vw]"
• ಇಂಟರಾಕ್ಟಿವ್ ಸ್ಟೇಟ್ಸ್: ಹೋವರ್, ಫೋಕಸ್, ಅಥವಾ ಇತರ ಸ್ಥಿತಿಗಳಲ್ಲಿ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಿ.
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 ಕಂಪೈಲರ್‌ಗೆ ಧನ್ಯವಾದಗಳು, ಉತ್ತರವು ದೃಢವಾಗಿ ಇಲ್ಲ ಎಂಬುದಾಗಿದೆ.

Tailwind ನ 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 ನೊಂದಿಗೆ ಹೊರತೆಗೆಯಬಹುದು.

ತೀರ್ಮಾನ: ಅನಂತ ಶಕ್ತಿ, ಶೂನ್ಯ ರಾಜಿ

Tailwind CSS ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್ ಕೇವಲ ಒಂದು ಚಾಣಾಕ್ಷ ತಂತ್ರಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿದೆ; ಅವು ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ಮಾದರಿಯ ಮೂಲಭೂತ ವಿಕಾಸವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಅವು ಎಚ್ಚರಿಕೆಯಿಂದ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಪಾರುಗಾಣಿಕಾ ಮಾರ್ಗವಾಗಿದ್ದು, ಫ್ರೇಮ್‌ವರ್ಕ್ ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯನ್ನು ಎಂದಿಗೂ ಸೀಮಿತಗೊಳಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಿಮ್ಮ ಮಾರ್ಕಪ್‌ನೊಳಗಿಂದಲೇ CSS ನ ಸಂಪೂರ್ಣ ಶಕ್ತಿಗೆ ನೇರ ಸೇತುವೆಯನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಶೈಲಿಗಳನ್ನು ಬರೆಯಲು ನಿಮ್ಮ HTML ಅನ್ನು ಬಿಟ್ಟುಹೋಗಲು ಉಳಿದಿರುವ ಕೊನೆಯ ಕಾರಣವನ್ನು ಅವು ನಿವಾರಿಸುತ್ತವೆ.

ಸ್ಥಿರತೆಗಾಗಿ ನಿಮ್ಮ ಥೀಮ್ ಮೇಲೆ ಯಾವಾಗ ಅವಲಂಬಿಸಬೇಕು ಮತ್ತು ನಮ್ಯತೆಗಾಗಿ ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟಿಗಾಗಿ ಯಾವಾಗ ಕೈಚಾಚಬೇಕು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವೇಗವಾಗಿ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಹೆಚ್ಚು ಮಹತ್ವಾಕಾಂಕ್ಷೆಯ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ರಚನೆ ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸದ ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ ಬೇಡಿಕೆಗಳ ನಡುವೆ ನೀವು ಇನ್ನು ಮುಂದೆ ರಾಜಿ ಮಾಡಿಕೊಳ್ಳಬೇಕಾಗಿಲ್ಲ. ಆರ್ಬಿಟ್ರರಿ ಪ್ರಾಪರ್ಟೀಸ್‌ನೊಂದಿಗೆ, Tailwind CSS ನಿಮಗೆ ಎರಡನ್ನೂ ನೀಡುತ್ತದೆ.