M

MLOG

ಕನ್ನಡ

ಪೇರೆಂಟ್ ಸ್ಟೇಟ್ ಆಧರಿಸಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ UIಗಳನ್ನು ರಚಿಸಲು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.

ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ಡೈನಾಮಿಕ್ ಇಂಟರ್ಫೇಸ್‌ಗಳಿಗಾಗಿ ಪೇರೆಂಟ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು

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

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

ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಎಂದರೇನು?

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

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

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ಗಾಗಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗೆ group- ಮತ್ತು ನಂತರ ಸ್ಟೇಟ್ ಅನ್ನು ಪೂರ್ವಪ್ರತ್ಯಯವಾಗಿ ಸೇರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪೇರೆಂಟ್ ಗ್ರೂಪ್ ಹೋವರ್ ಆದಾಗ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ group-hover:bg-blue-500 ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ಗೆ group ಕ್ಲಾಸ್ ಅನ್ವಯಿಸುವ ಮೂಲಕ ಅದನ್ನು "ಗ್ರೂಪ್" ಎಂದು ಗೊತ್ತುಪಡಿಸಬೇಕಾಗುತ್ತದೆ.

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಏಕೆ ಬಳಸಬೇಕು? ಪ್ರಯೋಜನಗಳು

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಅಳವಡಿಕೆಯು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ಡಿಸೈನರ್‌ಗಳಿಗೆ ಹಲವಾರು ಮಹತ್ವದ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:

ಕೋರ್ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ ಪರಿಕಲ್ಪನೆಗಳು

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು, ಕೆಲವು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಗ್ರಹಿಸುವುದು ಬಹಳ ಮುಖ್ಯ:

1. `group` ಕ್ಲಾಸ್

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನ ಅಡಿಪಾಯವೆಂದರೆ group ಕ್ಲಾಸ್. ನಿಮ್ಮ ಸ್ಟೇಟ್-ಆಧಾರಿತ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಪ್ರಚೋದಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕೆಂದು ನೀವು ಬಯಸುವ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಈ ಕ್ಲಾಸ್ ಅನ್ನು ಅನ್ವಯಿಸಬೇಕು. ಪೇರೆಂಟ್‌ನಲ್ಲಿ group ಕ್ಲಾಸ್ ಇಲ್ಲದಿದ್ದರೆ, ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲಿನ ಯಾವುದೇ group-* ಪ್ರಿಫಿಕ್ಸ್‌ಗಳು ಯಾವುದೇ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

2. `group-*` ಪ್ರಿಫಿಕ್ಸ್

ಈ ಪ್ರಿಫಿಕ್ಸ್ ಅನ್ನು ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಟೈಲ್ವಿಂಡ್ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಇದು ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ (group ಕ್ಲಾಸ್‌ನೊಂದಿಗೆ ಗುರುತಿಸಲಾಗಿದೆ) ನಿರ್ದಿಷ್ಟ ಸ್ಟೇಟ್‌ನಲ್ಲಿದ್ದಾಗ ಮಾತ್ರ ಯುಟಿಲಿಟಿಯನ್ನು ಅನ್ವಯಿಸಬೇಕು ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳು ಸೇರಿವೆ:

3. ನೆಸ್ಟಿಂಗ್ ಗ್ರೂಪ್ಸ್ (`group/` ಪ್ರಿಫಿಕ್ಸ್)

ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ನೆಸ್ಟೆಡ್ ಗ್ರೂಪ್‌ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಸಹ ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ದೊಡ್ಡ ರಚನೆಯೊಳಗೆ "ಗ್ರೂಪ್ಸ್" ಎಂದು ಪರಿಗಣಿಸಬಹುದಾದ ಅನೇಕ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ನೀವು group/ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ಅವುಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ಐಡೆಂಟಿಫೈಯರ್‌ಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳು ನಂತರ group--* ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಈ ನಿರ್ದಿಷ್ಟ ಪೇರೆಂಟ್ ಗ್ರೂಪ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಬಹುದು. ಅನಪೇಕ್ಷಿತ ಸ್ಟೈಲಿಂಗ್ ಅಡ್ಡಪರಿಣಾಮಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗೆ ಇದು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆಗೆ:

<div class="group/card group-hover:scale-105 transition-transform duration-300">
  <!-- ಕಾರ್ಡ್ ಕಂಟೆಂಟ್ -->
  <div class="group-hover/card:text-blue-600">
    ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
  </div>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, group/card ಈ ನಿರ್ದಿಷ್ಟ div ಅನ್ನು "card" ಗ್ರೂಪ್ ಎಂದು ಗೊತ್ತುಪಡಿಸುತ್ತದೆ. ಕಾರ್ಡ್ ಗ್ರೂಪ್ ಅನ್ನು ಹೋವರ್ ಮಾಡಿದಾಗ (group-hover:scale-105), ಸಂಪೂರ್ಣ ಕಾರ್ಡ್ ಸ್ಕೇಲ್ ಆಗುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಿರ್ದಿಷ್ಟ group/card ಅನ್ನು ಹೋವರ್ ಮಾಡಿದಾಗ (group-hover/card:text-blue-600), ಅದರಲ್ಲಿರುವ ಟೆಕ್ಸ್ಟ್ ಮಾತ್ರ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಈ ಮಟ್ಟದ ನಿರ್ದಿಷ್ಟತೆಯು ಸಂಕೀರ್ಣ UIಗಳಿಗೆ ಪ್ರಮುಖವಾಗಿದೆ.

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು, ವಿವಿಧ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಉದಾಹರಣೆ 1: ಇಂಟರಾಕ್ಟಿವ್ ಕಾರ್ಡ್‌ಗಳು

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

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

<div class="group relative cursor-pointer overflow-hidden rounded-xl bg-white p-8 shadow-sm transition-shadow duration-300 hover:shadow-lg"
     >
  <!-- ಕಾರ್ಡ್ ಚಿತ್ರ -->
  <div class="mb-4 h-48 w-full object-cover"
       >
    <img src="/images/placeholder-image.jpg" alt="ಉತ್ಪನ್ನದ ಚಿತ್ರ" class="w-full h-full rounded-md" 
         >
  </div>
  
  <!-- ಕಾರ್ಡ್ ಕಂಟೆಂಟ್ -->
  <h3 class="mb-2 text-xl font-bold text-gray-900"
      >
    ಜಾಗತಿಕ ನಾವೀನ್ಯತೆಗಳ ಶೃಂಗಸಭೆ
  </h3>
  <p class="mb-4 text-gray-600"
     >
    ಅತ್ಯಾಧುನಿಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅನ್ವೇಷಿಸಿ ಮತ್ತು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಉದ್ಯಮದ ನಾಯಕರೊಂದಿಗೆ ಸಂಪರ್ಕ ಸಾಧಿಸಿ.
  </p>
  
  <!-- ಆಕ್ಷನ್ ಬಟನ್ -->
  <button class="inline-block rounded-lg px-4 py-2 text-sm font-medium transition duration-300"
          >
    <span class="group-hover:text-white"
          >ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ</span>
    <span class="group-hover:bg-white"
          ></span>
  </button>
</div>

ವಿವರಣೆ:

ಉದಾಹರಣೆ 2: ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಹೋವರ್ ಮಾಡಿದಾಗ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಅಥವಾ ಸಬ್‌ಮೆನುಗಳ ಅನುಷ್ಠಾನವನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.

ಸನ್ನಿವೇಶ: ಒಂದು ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವನ್ನು ಹೊಂದಿದೆ, ಅದು ಪೇರೆಂಟ್ ಲಿಂಕ್ ಅನ್ನು ಹೋವರ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಗೋಚರಿಸಬೇಕು. ಪೇರೆಂಟ್ ಲಿಂಕ್ ಹೋವರ್ ಸಮಯದಲ್ಲಿ ಅಂಡರ್‌ಲೈನ್ ಇಂಡಿಕೇಟರ್ ಅನ್ನು ಸಹ ಹೊಂದಿರಬೇಕು.

<nav class="bg-gray-800 p-4"
     >
  <ul class="flex space-x-6"
      >
    <li class="group relative"
        >
      <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300"
         >
        ಸೇವೆಗಳು
        <span class="group-hover:w-full"
              ></span>
      </a>
      
      <!-- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು -->
      <div class="absolute left-0 z-10 mt-2 w-48 origin-top-left scale-95 transform rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition duration-300 ease-out group-hover:scale-100 group-hover:opacity-100"
           >
        <div class="py-1"
             >
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
             >
            ಜಾಗತಿಕ ಸಲಹೆ
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
             >
            ಮಾರುಕಟ್ಟೆ ಸಂಶೋಧನೆ
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
             >
            ಡಿಜಿಟಲ್ ರೂಪಾಂತರ
          </a>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300"
         >
        ನಮ್ಮ ಬಗ್ಗೆ
      </a>
    </li>
    <li>
      <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300"
         >
        ಸಂಪರ್ಕಿಸಿ
      </a>
    </li>
  </ul>
</nav>

ವಿವರಣೆ:

ಉದಾಹರಣೆ 3: ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ ಸ್ಟೇಟ್‌ಗಳು ಮತ್ತು ಲೇಬಲ್‌ಗಳು

ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಸ್ಟೇಟ್ ಅಥವಾ ಸಂಬಂಧಿತ ಲೇಬಲ್ ಆಧರಿಸಿ ಸ್ಟೈಲ್ ಮಾಡುವುದು ಬಳಕೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ಇದಕ್ಕಾಗಿ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಅತ್ಯುತ್ತಮವಾಗಿವೆ.

ಸನ್ನಿವೇಶ: ಒಂದು ಚೆಕ್‌ಬಾಕ್ಸ್ ಚೆಕ್ ಆದಾಗ, ಅದರ ಸಂಬಂಧಿತ ಲೇಬಲ್ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಬೇಕು ಮತ್ತು ಸಂಬಂಧಿತ ಇನ್‌ಪುಟ್‌ಗಳ ಗುಂಪಿನ ಸುತ್ತಲಿನ ಬಾರ್ಡರ್ ಹೆಚ್ಚು ಪ್ರಮುಖವಾಗಬೇಕು.

<div class="border border-gray-300 p-4 rounded-lg group/input-group"
     >
  <h3 class="text-lg font-semibold text-gray-800 mb-3"
      >
    ಆದ್ಯತೆಗಳು
  </h3>
  
  <div class="space-y-3"
       >
    <div class="flex items-center"
         >
      <input type="checkbox" id="notifications" class="form-checkbox h-5 w-5 text-blue-600"
             >
      <label for="notifications" class="ml-2 block text-sm text-gray-700 cursor-pointer"
             >
        ಇಮೇಲ್ ಅಧಿಸೂಚನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ
      </label>
    </div>
    
    <div class="flex items-center"
         >
      <input type="checkbox" id="updates" class="form-checkbox h-5 w-5 text-blue-600"
             >
      <label for="updates" class="ml-2 block text-sm text-gray-700 cursor-pointer"
             >
        ಉತ್ಪನ್ನದ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸಿ
      </label>
    </div>
  </div>
  
  <!-- ಗ್ರೂಪ್ ಸ್ಟೇಟ್ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲಿಂಗ್ ಅನ್ವಯಿಸಲಾಗಿದೆ -->
  <label for="notifications" class="group-checked:text-green-700 group-checked:font-medium"
         ></label>
  <label for="updates" class="group-checked:text-green-700 group-checked:font-medium"
         ></label>
  
  <div class="group-checked:border-green-500 group-checked:ring-1 group-checked:ring-green-500 mt-4 border-t border-gray-300 pt-4"
       >
    <p class="text-sm text-gray-500"
       >
      ನಿಮ್ಮ ಅಧಿಸೂಚನೆ ಆದ್ಯತೆಗಳನ್ನು ಉಳಿಸಲಾಗಿದೆ.
    </p>
  </div>
</div>

ವಿವರಣೆ:

ಉದಾಹರಣೆ 4: ಅಕಾರ್ಡಿಯನ್‌ಗಳು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ವಿಭಾಗಗಳು

ಕಂಟೆಂಟ್ ಅನ್ನು ಸಂಘಟಿಸಲು ಮತ್ತು ಸ್ಥಳವನ್ನು ಉಳಿಸಲು ಅಕಾರ್ಡಿಯನ್‌ಗಳು ಅತ್ಯುತ್ತಮವಾಗಿವೆ. ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ವಿಸ್ತರಿಸಿದ ಅಥವಾ ಕುಗ್ಗಿದ ಸ್ಟೇಟ್‌ಗಳಿಗಾಗಿ ದೃಶ್ಯ ಸಂಕೇತಗಳನ್ನು ನಿರ್ವಹಿಸಬಹುದು.

ಸನ್ನಿವೇಶ: ವಿಭಾಗವನ್ನು ವಿಸ್ತರಿಸಿದಾಗ ಅಕಾರ್ಡಿಯನ್ ಐಟಂನ ಹೆಡರ್ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಬೇಕು ಮತ್ತು ಐಕಾನ್ ತಿರುಗಬೇಕು.

<div class="border border-gray-200 rounded-lg mb-4"
     >
  <button class="group w-full text-left px-6 py-4 flex justify-between items-center"
          >
    <span class="text-lg font-semibold text-gray-700"
          >
      ಜಾಗತಿಕ ಮಾರುಕಟ್ಟೆ ಪ್ರವೃತ್ತಿಗಳು
    </span>
    
    <!-- ಐಕಾನ್ -->
    <svg class="w-6 h-6 text-gray-400 group-focus:text-blue-500 group-hover:text-blue-500 transition duration-300"
         fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
         >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
            ></path>
    </svg>
  </button>
  
  <!-- ಅಕಾರ್ಡಿಯನ್ ಕಂಟೆಂಟ್ -->
  <div class="px-6 pb-4 text-gray-600"
       >
    <p class="text-sm"
       >
      ಪ್ರಸ್ತುತ ಜಾಗತಿಕ ಆರ್ಥಿಕ ಬದಲಾವಣೆಗಳು, ಗ್ರಾಹಕರ ವರ್ತನೆ ಮತ್ತು ಉದಯೋನ್ಮುಖ ಮಾರುಕಟ್ಟೆ ಅವಕಾಶಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಿ.
    </p>
  </div>
</div>

<!-- ಸ್ಟೇಟ್‌ಗಾಗಿ ವಿಭಿನ್ನ ವಿಧಾನದೊಂದಿಗೆ ಉದಾಹರಣೆ -->
<div class="border border-gray-200 rounded-lg mb-4"
     >
  <button class="group/acc-header w-full text-left px-6 py-4 flex justify-between items-center"
          >
    <span class="text-lg font-semibold text-gray-700 group-focus/acc-header:text-blue-700"
          >
      ತಾಂತ್ರಿಕ ಪ್ರಗತಿಗಳು
    </span>
    
    <!-- ಐಕಾನ್ -->
    <svg class="w-6 h-6 text-gray-400 group-focus/acc-header:text-blue-700 group-hover/acc-header:rotate-180 transition duration-300"
         fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
         >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
            ></path>
    </svg>
  </button>
  
  <!-- ಅಕಾರ್ಡಿಯನ್ ಕಂಟೆಂಟ್ -->
  <div class="px-6 pb-4 text-gray-600"
       >
    <p class="text-sm"
       >
      AI, ಬ್ಲಾಕ್‌ಚೈನ್ ಮತ್ತು ವಿಶ್ವಾದ್ಯಂತ ವ್ಯವಹಾರಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಸುಸ್ಥಿರ ತಂತ್ರಜ್ಞಾನದಲ್ಲಿನ ಇತ್ತೀಚಿನದನ್ನು ಅನ್ವೇಷಿಸಿ.
    </p>
  </div>
</div>

ವಿವರಣೆ:

ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಕಸ್ಟಮೈಸೇಶನ್

ಕೋರ್ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳು ಸರಳವಾಗಿದ್ದರೂ, ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಸುಧಾರಿತ ಬಳಕೆಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ:

1. ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಸಂಯೋಜಿಸುವುದು

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

<div class="group/item checked:bg-blue-100 border p-4 rounded-md"
     >
  <div class="group-hover:scale-105 group-checked:scale-110 transition-transform"
       >
    ಐಟಂ ಕಂಟೆಂಟ್
  </div>
</div>

ಇಲ್ಲಿ, group-hover:scale-105 ಪೇರೆಂಟ್ ಹೋವರ್ ಆದಾಗ ಅನ್ವಯಿಸುತ್ತದೆ, ಮತ್ತು group-checked:scale-110 ಪೇರೆಂಟ್ ಚೆಕ್ ಆದಾಗ ಅನ್ವಯಿಸುತ್ತದೆ. group-checked ಕಾರ್ಯನಿರ್ವಹಿಸಲು, ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಚೆಕ್ ಆದ ಸ್ಟೇಟ್ ಅನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆ ಬೇಕಾಗುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಕ್ಲಾಸ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುವ ಮೂಲಕ.

2. `tailwind.config.js` ನಲ್ಲಿ ವೇರಿಯಂಟ್ಸ್ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು

ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಹೆಚ್ಚು ವಿಸ್ತರಿಸಬಲ್ಲದು. ನಿಮ್ಮ tailwind.config.js ಫೈಲ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ವೇರಿಯಂಟ್‌ಗಳನ್ನು, ಗ್ರೂಪ್ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ, ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಇದು ಪುನರ್ಬಳಕೆ ಮಾಡಬಹುದಾದ, ಪ್ರಾಜೆಕ್ಟ್-ನಿರ್ದಿಷ್ಟ ಸ್ಟೇಟ್ ಮಾಡಿಫೈಯರ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, group-data-* ವೇರಿಯಂಟ್ ರಚಿಸಲು:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // ... ಇತರ ಕಾನ್ಫಿಗರೇಶನ್‌ಗಳು
    },
  },
  plugins: [
    // ... ಇತರ ಪ್ಲಗಿನ್‌ಗಳು
    require('tailwindcss-data-attributes')({ // ಈ ಪ್ಲಗಿನ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ
      attribute: 'data',
      variants: ['group-data'], // group-data-* ವೇರಿಯಂಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ
    })
  ],
}

ಈ ಕಾನ್ಫಿಗರೇಶನ್‌ನೊಂದಿಗೆ, ನೀವು ನಂತರ ಬಳಸಬಹುದು:

<div class="group data-[state=active]:bg-purple-200"
     data-state="active"
     >
  ಈ div ಸಕ್ರಿಯವಾಗಿದೆ.
</div>

<div class="group group-data-[state=active]:text-purple-600"
     data-state="active"
     >
  ಮತ್ತೊಂದು ಎಲಿಮೆಂಟ್
</div>

ಡೇಟಾ ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಶಕ್ತಿಯುತವಾಗಿದೆ.

3. ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಪರಿಗಣನೆಗಳು

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

ಇಂಟರಾಕ್ಟಿವ್ ಆಗಿರುವ ಆದರೆ ನೇಟಿವ್ ಇಂಟರಾಕ್ಟಿವ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ಹೊಂದಿರದ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ (ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಕಾರ್ಡ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ನಾನ್-ಬಟನ್ div ನಂತೆ), ನೀವು ARIA ರೋಲ್‌ಗಳನ್ನು (ಉದಾ., role="button", tabindex="0") ಸೇರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ನಿರ್ವಹಿಸಿ.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ

ಶಕ್ತಿಶಾಲಿಯಾಗಿದ್ದರೂ, ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್ ಕೆಲವೊಮ್ಮೆ ಗೊಂದಲದ ಮೂಲವಾಗಬಹುದು:

ತೀರ್ಮಾನ

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

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

ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಸೊಬಗು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊಸ ಎತ್ತರವನ್ನು ತಲುಪುವುದನ್ನು ನೋಡಿ!

ಟೈಲ್ವಿಂಡ್ ಸಿಎಸ್ಎಸ್ ಗ್ರೂಪ್ ವೇರಿಯಂಟ್ಸ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ಡೈನಾಮಿಕ್ ಇಂಟರ್ಫೇಸ್‌ಗಳಿಗಾಗಿ ಪೇರೆಂಟ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು | MLOG