यह राइट-अप टेलविंड में आधार शैली जोड़कर शीर्षकों को शैलीबद्ध करने की विधि का वर्णन करेगा।
बेस स्टाइल टेलविंड का उपयोग करके शीर्षकों को कैसे स्टाइल करें?
टेलविंड में शीर्षकों को स्टाइल करने के लिए, दिए गए चरणों को देखें:
- प्रोजेक्ट की CSS फ़ाइल खोलें।
- CSS फ़ाइल में, 'का उपयोग करके शीर्षकों में आधार शैली जोड़ें' @परत 'के तहत निर्देश' @tailwind बेस; ” निर्देश।
- एक HTML प्रोग्राम बनाएं और उसमें Heading Elements का उपयोग करें।
- HTML प्रोग्राम चलाएँ और आउटपुट सत्यापित करें।
चरण 1: CSS फ़ाइल में शीर्षकों में आधार शैली जोड़ें
सबसे पहले, 'खोलें' शैली.सीएसएस 'फ़ाइल और' का उपयोग करके इसमें शीर्षकों के लिए आधार शैली जोड़ें @परत ” निर्देश। उदाहरण के लिए, हमने निम्न शीर्षकों में आधार शैली जोड़ी है:
@tailwind आधार ;
@परत आधार {
एच 1 {
@आवेदन करना टेक्स्ट-6xl ;
}
एच 2 {
@आवेदन करना टेक्स्ट-5xl ;
}
h3 {
@आवेदन करना टेक्स्ट-4xl ;
}
एच 4 {
@आवेदन करना पाठ-3xl ;
}
h5 {
@आवेदन करना पाठ-2xl ;
}
}
@tailwind अवयव ;
@tailwind उपयोगिताओं ;
यहाँ:
- ' @परत आधार {…} ” एक नई आधार परत को परिभाषित करता है और शीर्षक घटकों के लिए शैलियों को समाहित करता है।
- ' h1 { @apply text-6xl; } 'लागू करता है' टेक्स्ट-6xl 'उपयोगिता वर्ग' एच 1 ”तत्व।
- इसी तरह, ' एच 2 ”, “ h3 ”, “ एच 4 ', और ' h5 'तत्वों का फ़ॉन्ट आकार' का उपयोग करके सेट किया गया है @आवेदन करना ”और संबंधित उपयोगिता वर्ग (पाठ-5xl, पाठ-4xl, पाठ-3xl, और पाठ-2xl)।
चरण 2: शीर्षकों का उपयोग करके HTML वेब पेज बनाएं
फिर, HTML प्रोग्राम बनाएं और उसमें हेडिंग एलिमेंट्स का उपयोग करें। यहाँ, हमने निम्नलिखित शीर्षक तत्वों का उपयोग किया है:
< शरीर >
< डिव कक्षा = 'एच-स्क्रीन जस्टिफाई-सेंटर टेक्स्ट-सेंटर बीजी-वायलेट-400' >
< एच 1 > शीर्षक 1 < / एच 1 >
< एच 2 > शीर्षक 2 < / एच 2 >
< h3 > शीर्षक 3 < / h3 >
< एच 4 > शीर्षक 4 < / एच 4 >
< h5 > शीर्षक 5 < / h5 >
< / डिव >
< / शरीर >
चरण 3: HTML प्रोग्राम चलाएँ
अंत में, HTML प्रोग्राम चलाएं और सत्यापन के लिए वेब पेज देखें:
उपरोक्त आउटपुट ने शीर्षकों को प्रदर्शित किया है क्योंकि वे CSS फ़ाइल में शैलियाँ थीं।
निष्कर्ष
टेलविंड में शीर्षकों को शैलीबद्ध करने के लिए, CSS फ़ाइल खोलें, और “का उपयोग करके शीर्षकों में आधार शैली जोड़ें @परत 'के तहत निर्देश' @tailwind बेस; ” निर्देश। फिर, एक HTML प्रोग्राम बनाएं और उसमें हेडिंग एलिमेंट्स का उपयोग करें। अंत में, आउटपुट को सत्यापित करने के लिए HTML वेब पेज देखें। इस राइट-अप में टेलविंड में बेस स्टाइल जोड़कर स्टाइल हेडिंग की विधि समझाई गई है।