Tailwind CSS ಎಂದರೇನು? AI ಬಿಲ್ಡರ್ ಬಳಕೆದಾರರಿಗೆ ಸರಳ ಮಾರ್ಗದರ್ಶಿ

Tailwind CSS ಎಂಬುದು ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಒಂದು ಟೂಲ್‌ಕಿಟ್. ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಸ್ಟೈಲ್ ನಿಯಮಗಳನ್ನು ಬರೆಯುವ ಬದಲು, ಪ್ರತಿ ಅಂಶಕ್ಕೆ ಚಿಕ್ಕ, ಸಿದ್ಧ ಕ್ಲಾಸ್ ಹೆಸರುಗಳನ್ನು ನೀಡುತ್ತೀರಿ — ಬಿಳಿ ಹಿನ್ನೆಲೆಗೆ bg-white, ಪ್ಯಾಡಿಂಗ್‌ಗೆ p-4, ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ text-lg, ದುಂಡಾದ ಮೂಲೆಗಳಿಗೆ rounded-xl — ಮತ್ತು Tailwind ಬ್ರೌಸರ್‌ಗೆ ಬೇಕಾದ CSS ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಇದು ಉಚಿತ, ಓಪನ್ ಸೋರ್ಸ್, ಮತ್ತು ಇಂದಿನ ವೆಬ್ ಆ್ಯಪ್‌ಗಳನ್ನು ಶೈಲಿಗೊಳಿಸಲು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ವಿಧಾನಗಳಲ್ಲಿ ಒಂದು.

AI ಜೊತೆ ನಿರ್ಮಿಸುವಾಗ Tailwind ಏಕೆ ಮುಖ್ಯ

ನೀವು AI ಆ್ಯಪ್ ಬಿಲ್ಡರ್ ಬಳಸಿ ವೆಬ್ ಆ್ಯಪ್ ನಿರ್ಮಿಸಿದರೆ, ಅದು Tailwind ಬಳಸಿ ಶೈಲಿಗೊಂಡಿರುವ ಸಾಧ್ಯತೆ ಹೆಚ್ಚು. ಉದಾಹರಣೆಗೆ, Mythex ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ನೀವು ಬೇರೆ ಏನನ್ನೂ ಕೇಳದಿದ್ದರೆ Vite + React + TypeScript + Tailwind ಮೇಲೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ (ತಂತ್ರಜ್ಞಾನ ಹೇಗೆ ಆರಿಸಲಾಗುತ್ತದೆ).

ಇದು ನಿಮಗೆ ಮೂರು ರೀತಿಯಲ್ಲಿ ಮುಖ್ಯ:

• ವಿನ್ಯಾಸ ಬದಲಾವಣೆಗಳು ಸುಲಭ. ಸ್ಟೈಲಿಂಗ್ ಪ್ರತಿ ಬಟನ್, ಕಾರ್ಡ್ ಮತ್ತು ಹೆಡಿಂಗ್ ಪಕ್ಕದಲ್ಲೇ ಇರುವುದರಿಂದ, “ಕಾರ್ಡ್‌ಗಳನ್ನು ಕಡಿಮೆ ಇರುಕಲಾಗಿ ಮಾಡಿ” ಎಂಬ ಕೋರಿಕೆಗೆ AI ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಕೆಲವು ಕ್ಲಾಸ್ ಹೆಸರುಗಳನ್ನು ಬದಲಿಸಬಹುದು.
• ನೀವು ಅದನ್ನು ಓದಬಹುದು. Tailwind ಕ್ಲಾಸ್‌ಗಳು ಸರಳ ಇಂಗ್ಲಿಷ್‌ಗೆ ಹತ್ತಿರವಾಗಿವೆ. text-center font-bold text-2xl ಅನ್ನು ಓದುವುದು ಕಷ್ಟವಲ್ಲ, ನೀವು ಎಂದಿಗೂ ಕೋಡ್ ಬರೆಯದಿದ್ದರೂ ಸಹ.
• ನೋಟ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ. Tailwind ಗಾತ್ರ, ಅಂತರ ಮತ್ತು ಬಣ್ಣಗಳ ಸ್ಥಿರ ಮಾಪಕದೊಂದಿಗೆ ಬರುತ್ತದೆ. ಇದು ಆ್ಯಪ್ ಒಂದೇ ಬೂದು ಬಣ್ಣದ 14 ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ಛಾಯೆಗಳನ್ನು ಹೊಂದುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ದೈನಂದಿನ ಉದಾಹರಣೆ

ಮನೆ ಕಟ್ಟುವುದು ಮತ್ತು ಬಣ್ಣ ಬಳಿಯುವುದನ್ನು ಯೋಚಿಸಿ.

ಸರಳ CSS ಎಂದರೆ ಪ್ರತಿ ಗೋಡೆಗೆ ನೀವೇ ಬಣ್ಣ ಕಲಸುವುದು. ನಿಮಗೆ ಪೂರ್ಣ ಸ್ವಾತಂತ್ರ್ಯವಿದೆ, ಆದರೆ ಕೆಲವು ದಿನಗಳ ನಂತರ ಹಾಲ್‌ನ ಬಣ್ಣ “ಬೆಚ್ಚಗಿನ ಬಿಳಿ”, ಹಜಾರದ್ದು “ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಬೆಚ್ಚಗಿನ ಬಿಳಿ”, ಮತ್ತು ಏಕೆ ಎಂದು ಯಾರಿಗೂ ನೆನಪಿರುವುದಿಲ್ಲ.

Tailwind ಎಂದರೆ ಬಣ್ಣದ ಅಂಗಡಿಯ ಚಾರ್ಟ್ ಮತ್ತು ಲೇಬಲ್ ಮಾಡಿದ ಸ್ಟಿಕರ್‌ಗಳ ಸೆಟ್. ಪ್ರತಿ ಗೋಡೆಗೆ ಒಂದು ಸ್ಟಿಕರ್ ಇದೆ — “ಬಿಳಿ, ಮ್ಯಾಟ್, 2 ಕೋಟ್” — ಮತ್ತು ಚಾರ್ಟ್ ಆಯ್ದ ಛಾಯೆಗಳನ್ನು ಮಾತ್ರ ನೀಡುತ್ತದೆ. ನಿಮ್ಮ ಸ್ವಾತಂತ್ರ್ಯ ಸ್ವಲ್ಪ ಕಡಿಮೆಯಾಗುತ್ತದೆ, ಆದರೆ ಕೆಲಸದಲ್ಲಿ ಇರುವ ಎಲ್ಲರಿಗೂ ಸ್ಟಿಕರ್ ಓದಿ ಪ್ರತಿ ಗೋಡೆ ಹೇಗೆ ಕಾಣಬೇಕು ಎಂದು ತಿಳಿಯುತ್ತದೆ.

Tailwind ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ವೆಬ್ ಪುಟವು HTML (ವಿಷಯ ಮತ್ತು ರಚನೆ) ಮತ್ತು CSS (ನೋಟ) ನಿಂದ ನಿರ್ಮಿತವಾಗಿದೆ. ಸಾಮಾನ್ಯವಾಗಿ CSS ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ಇದರಂತಹ ನಿಯಮಗಳೊಂದಿಗೆ ಇರುತ್ತದೆ:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind ನೊಂದಿಗೆ, ಆ ನಿಯಮವನ್ನು ಬರೆಯುವ ಬದಲು ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಅಂಶದ ಮೇಲೆ ಇಡುತ್ತೀರಿ:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

ಪ್ರತಿ ಕ್ಲಾಸ್ ಒಂದು ಸಣ್ಣ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆ್ಯಪ್ ಬಿಲ್ಡ್ ಆದಾಗ, Tailwind ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡಿ ನೀವು ನಿಜವಾಗಿ ಬಳಸಿದ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಹುಡುಕುತ್ತದೆ ಮತ್ತು ಅವುಗಳಿಗೆ ಮಾತ್ರ CSS ರಚಿಸುತ್ತದೆ. ಇದರಿಂದ ಅಂತಿಮ ಸ್ಟೈಲ್‌ಶೀಟ್ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ.

Tailwind ಆವೃತ್ತಿ 4, ಪ್ರಸ್ತುತ ಮುಖ್ಯ ಆವೃತ್ತಿ, ಬಹಳ ಕಡಿಮೆ ಕಾನ್ಫಿಗರೇಶನ್‌ನೊಂದಿಗೆ ಸೆಟಪ್ ಆಗುತ್ತದೆ: ನೀವು ಅದನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ, ಅದರ ಪ್ಲಗಿನ್ ಅನ್ನು ನಿಮ್ಮ ಬಿಲ್ಡ್ ಟೂಲ್‌ಗೆ ಸೇರಿಸಿ, ಮತ್ತು ನಿಮ್ಮ CSS ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ @import "tailwindcss"; ಇಡುತ್ತೀರಿ. ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳು ಮತ್ತು ಫಾಂಟ್‌ಗಳಂತಹ ಕಸ್ಟಮೈಸೇಶನ್‌ಗಳನ್ನು ಹಳೆಯ ಆವೃತ್ತಿಗಳಂತೆ ದೊಡ್ಡ JavaScript ಕಾನ್ಫಿಗ್ ಫೈಲ್‌ನಲ್ಲಿ ಅಲ್ಲ, CSS ನಲ್ಲಿ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. ನೀವು tailwind.config.js ಉಲ್ಲೇಖಿಸುವ ಹಳೆಯ ಟ್ಯುಟೋರಿಯಲ್ ಓದಿದರೆ, ಅದಕ್ಕೆ ಕಾರಣ ಇದೇ.

ಒಂದು ಕೆಲಸ ಮಾಡಿದ ಉದಾಹರಣೆ: ಬೆಲೆ ಕಾರ್ಡ್

ನೀವು ಬೆಲೆ ಪುಟಕ್ಕಾಗಿ AI ಬಿಲ್ಡರ್‌ಗೆ ಕೇಳಿದ್ದೀರಿ ಮತ್ತು “Pro” ಕಾರ್ಡ್ ಎದ್ದು ಕಾಣಬೇಕೆಂದು ಬಯಸುತ್ತೀರಿ ಎಂದುಕೊಳ್ಳಿ. ಕಾರ್ಡ್‌ನ ಕೋಡ್ ಹೀಗಿರಬಹುದು (React ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ class ಅನ್ನು className ಎಂದು ಬರೆಯಲಾಗುತ್ತದೆ):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

ಎಡದಿಂದ ಬಲಕ್ಕೆ ಓದಿದರೆ:

“ನೀಲಿ ಗಡಿ ಮತ್ತು ಸೂಕ್ಷ್ಮ ನೆರಳಿನೊಂದಿಗೆ Pro ಕಾರ್ಡ್ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಿ” ಎಂದು ಕೇಳಿದರೆ, AI border-gray-200 ಅನ್ನು border-2 border-blue-600 ಗೆ ಬದಲಿಸಿ shadow-lg ಸೇರಿಸಬಹುದು. ಬದಲಾವಣೆ ಇಷ್ಟೇ.

ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್

Tailwind ಪರದೆ ಗಾತ್ರಗಳು ಮತ್ತು ಸ್ಥಿತಿಗಳಿಗೆ ಚಿಕ್ಕ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಹೊಂದಿದೆ:

• md:grid-cols-3 — ಮಧ್ಯಮ ಮತ್ತು ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ಮೂರು ಕಾಲಮ್‌ಗಳು; ಫೋನ್‌ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಒಂದೇ ಕಾಲಮ್ ಅನ್ವಯಿಸುತ್ತದೆ. Tailwind ಮೊಬೈಲ್-ಮೊದಲ ವಿಧಾನ: ಪೂರ್ವಪ್ರತ್ಯಯವಿಲ್ಲದ ಕ್ಲಾಸ್‌ಗಳು ಎಲ್ಲೆಡೆ ಅನ್ವಯಿಸುತ್ತವೆ, ಮತ್ತು ಪೂರ್ವಪ್ರತ್ಯಯಗಳು ದೊಡ್ಡ ಪರದೆಗಳಿಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಸೇರಿಸುತ್ತವೆ.
• hover:bg-gray-700 — ಮೌಸ್ ಮೇಲಿದ್ದಾಗ ಗಾಢ ಬಟನ್.
• dark:bg-gray-900 — ಡಾರ್ಕ್ ಮೋಡ್ ಆನ್ ಇದ್ದಾಗ ಬೇರೆ ಹಿನ್ನೆಲೆ.

ಇದಕ್ಕಾಗಿಯೇ ಮೊಬೈಲ್-ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್ ಅಥವಾ ಡಾರ್ಕ್ ಮೋಡ್ ಕೇಳುವುದು Tailwind ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ತ್ವರಿತವಾಗಿರುತ್ತದೆ.

ಪ್ರಮುಖ ಪದಗಳು

ಸಾಮಾನ್ಯ ತಪ್ಪು ಗ್ರಹಿಕೆಗಳು

• “Tailwind ಒಂದು ವಿನ್ಯಾಸ.” ಅಲ್ಲ. Tailwind ನಿಮಗೆ ಕಟ್ಟಡ ಬ್ಲಾಕ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ, ನೋಟವನ್ನಲ್ಲ. ಎರಡು Tailwind ಸೈಟ್‌ಗಳು ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಬಹುದು. “AI ಆ್ಯಪ್ ಲುಕ್” ಎಂಬ ಸಾಮಾನ್ಯ ನೋಟ ಬರುವುದು ಡೀಫಾಲ್ಟ್‌ಗಳಿಂದ, Tailwind ನಿಂದಲ್ಲ — ನಿಮ್ಮ ಬಿಲ್ಡರ್‌ಗೆ ನಿಜವಾದ ದಿಕ್ಕು ನೀಡಿ. AI ನೊಂದಿಗೆ ಚೆನ್ನಾಗಿ ಕಾಣುವ ಆ್ಯಪ್ ವಿನ್ಯಾಸ ಮಾಡುವುದು ಹೇಗೆ ನೋಡಿ.
• “ಇದು ಇನ್‌ಲೈನ್ ಸ್ಟೈಲ್‌ಗಳಂತೆಯೇ.” ಸಂಪೂರ್ಣವಾಗಿ ಅಲ್ಲ. ಕ್ಲಾಸ್‌ಗಳು ಹಂಚಿಕೆಯ ಮಾಪಕದಿಂದ ಬರುತ್ತವೆ, ಹೋವರ್, ಡಾರ್ಕ್ ಮೋಡ್ ಮತ್ತು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ, ಮತ್ತು ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಸಾಮಾನ್ಯ CSS ಆಗಿ ಪರಿವರ್ತನೆಗೊಳ್ಳುತ್ತವೆ.
• “Tailwind ಪುಟಗಳನ್ನು ಭಾರವಾಗಿಸುತ್ತದೆ.” ಬಿಲ್ಡ್ ನೀವು ಬಳಸಿದ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಮಾತ್ರ ಒಳಗೊಳ್ಳುತ್ತದೆ, ಆದ್ದರಿಂದ ಸಂದರ್ಶಕರಿಗೆ ಕಳುಹಿಸುವ CSS ಸಾಮಾನ್ಯವಾಗಿ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ.
• “ಉದ್ದದ ಕ್ಲಾಸ್ ಪಟ್ಟಿಗಳು ಅಸ್ತವ್ಯಸ್ತ ಕೋಡ್ ಎಂದರ್ಥ.” ಆರಂಭದಲ್ಲಿ ಗಡಿಬಿಡಿಯಾಗಿ ಕಾಣಬಹುದು, ಆದರೆ ಅಂಶದ ಎಲ್ಲಾ ನೋಟವು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿರುತ್ತದೆ. ಪುನರಾವರ್ತಿತ ಮಾದರಿಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು Button ಕಾಂಪೊನೆಂಟ್‌ನಂತಹ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸೇರಿಸಲಾಗುತ್ತದೆ.
• “Tailwind ಬಳಸಿದರೆ ಕಸ್ಟಮ್ CSS ಬಳಸಲು ಸಾಧ್ಯವಿಲ್ಲ.” ನಿಮಗೆ ಬೇಕಾದಾಗ ಸಾಮಾನ್ಯ CSS ಇನ್ನೂ ಬರೆಯಬಹುದು.

ನಿಮ್ಮ AI ಬಿಲ್ಡರ್‌ಗೆ ಏನು ಕೇಳಬೇಕು

• “ನಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳು ಮತ್ತು ಫಾಂಟ್‌ಗಳನ್ನು ಒಮ್ಮೆ ಥೀಮ್ ಟೋಕನ್‌ಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಿ, ಮತ್ತು ಕೋಡ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಬರೆದ ಬಣ್ಣಗಳ ಬದಲು ಎಲ್ಲೆಡೆ ಅವನ್ನು ಬಳಸಿ.”
• “ಪ್ರತಿ ಕಾರ್ಡ್, ಬಟನ್ ಮತ್ತು ಇನ್‌ಪುಟ್ ಒಂದೇ ಮೂಲೆ ದುಂಡಾಗುವಿಕೆ ಮತ್ತು ಅಂತರವನ್ನು ಬಳಸುವಂತೆ ಮಾಡಿ.”
• “ಫೋನ್ ಅಗಲದಲ್ಲಿ ಲೇಔಟ್ ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಹೊರಹೋಗುವ ಅಥವಾ ಸ್ಪರ್ಶಿಸಲು ಕಷ್ಟವಾದ ಯಾವುದನ್ನಾದರೂ ಸರಿಪಡಿಸಿ.”
• “Tailwind ನ dark: ವೇರಿಯಂಟ್ ಬಳಸಿ ಡಾರ್ಕ್ ಮೋಡ್ ಸೇರಿಸಿ ಮತ್ತು ಪಠ್ಯ ಕಾಂಟ್ರಾಸ್ಟ್ ಓದಲು ಸುಲಭವಾಗಿರುವಂತೆ ನೋಡಿಕೊಳ್ಳಿ.”
• “ಪುನರಾವರ್ತಿತ ಬಟನ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಒಂದು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ Button ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಸೇರಿಸಿ.”
• “ಈ ವಿಭಾಗದ Tailwind ಕ್ಲಾಸ್‌ಗಳನ್ನು ಸರಳ ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ ವಿವರಿಸಿ.”

Mythex ನಲ್ಲಿ Tailwind

ಹೊಸ Mythex ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಡೀಫಾಲ್ಟ್ ಆಗಿ Tailwind ಅನ್ನು React ಮತ್ತು TypeScript ಜೊತೆಗೆ ಬಳಸುತ್ತವೆ, ಆದ್ದರಿಂದ ದೃಶ್ಯ ಬದಲಾವಣೆಗಳನ್ನು ಸರಳ ಪದಗಳಲ್ಲಿ ಕೇಳಿ ಲೈವ್ Preview ನಲ್ಲಿ ನೋಡಬಹುದು. ಕೋಡ್ ನೋಡಲು ಬಯಸಿದರೆ, ಕೋಡ್ ಎಡಿಟರ್ ಪ್ರತಿ ಕ್ಲಾಸ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ (Free ನಲ್ಲಿ ಓದಲು ಮಾತ್ರ, Pro ನಲ್ಲಿ ಸಂಪಾದಿಸಬಹುದು). ನೀವು ಸರಳ CSS ಅಥವಾ ಬೇರೆ ಸೆಟಪ್ ಬಯಸಿದರೆ, ನಿಮ್ಮ ಮೊದಲ ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ ಅದನ್ನು ಹೇಳಿ — ದಸ್ತಾವೇಜು ತಂತ್ರಜ್ಞಾನ ಹೇಗೆ ಆರಿಸಲಾಗುತ್ತದೆ ಎಂದು ವಿವರಿಸುತ್ತದೆ.

ಪ್ರಶ್ನೆಗಳು