Tailwind CSS क्या है?

Tailwind CSS एक utility-first CSS फ्रेमवर्क है जो कम‑स्तर की utility क्लासेज़ प्रदान करता है ताकि आप सीधे अपने HTML में डिज़ाइन बना सकें। कस्टम CSS लिखने के बजाय, आप flex, pt-4, text-center जैसी पूर्व‑निर्मित क्लासेज़ को सीधे तत्वों पर लागू करते हैं। यह तरीका विकास को तेज़ करता है, फ़ाइल आकार को घटाता है, और कस्टम स्टाइलशीट्स और CSS नामकरण नियमों की आवश्यकता को समाप्त करके अधिक रखरखाव योग्य कोड बनाता है।

टूल विवरण

यह टूल पारंपरिक CSS कोड को तुरंत Tailwind CSS utility क्लासेज़ में बदल देता है। बस अपने CSS स्टाइल्स को पेस्ट करें, और यह प्रत्येक सेलेक्टर के लिए समकक्ष Tailwind क्लासेज़ उत्पन्न करेगा। कनवर्टर सामान्य CSS प्रॉपर्टीज़ को संभालता है और आउटपुट को स्वचालित रूप से सेलेक्टर नामों के बाद उनके संबंधित Tailwind क्लासेज़ के साथ फ़ॉर्मेट करता है, जिससे Tailwind CSS में माइग्रेशन सहज हो जाता है।

उदाहरण

इनपुट (CSS):

.button {
  display: flex;
  padding: 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
}

आउटपुट (Tailwind):

.button
flex p-4 bg-blue-500 text-white rounded-lg

इनपुट (CSS):

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

आउटपुट (Tailwind):

.container
max-w-7xl mx-auto text-center

विशेषताएँ

  • एक‑तरफ़ा CSS से Tailwind रूपांतरण
  • स्वचालित सिंटैक्स वैधता
  • आउटपुट में सेलेक्टर नामों को संरक्षित रखता है
  • एक साथ कई CSS नियमों को संभालता है
  • सामान्य CSS प्रॉपर्टीज़ और मानों को समर्थन देता है

उपयोग केस

  • पारंपरिक CSS से Tailwind CSS में मौजूदा प्रोजेक्ट्स का माइग्रेशन
  • परिचित CSS प्रॉपर्टीज़ के Tailwind समकक्ष सीखना
  • डिज़ाइन सिस्टम स्टाइल्स को utility क्लासेज़ में बदलना
  • कस्टम CSS लिखने के बजाय Tailwind के साथ तेज़ प्रोटोटाइप बनाना
  • लेगेसी स्टाइलशीट्स को आधुनिक utility-first दृष्टिकोण में रीफ़ैक्टर करना