Tailwind CSS एक CSS की एक लाइब्रेरी है जिसमें पहले से डिज़ाइन की गई styles और utilities मिलती है जिनके इस्तेमाल से एक प्रोफेशनल और शानदार वेबपेज बनाया जा सकता है.
आज के आर्टिकल Tailwind CSS In Hindi में आप Tailwind CSS के बारे में सब कुछ जानने वाले हैं इसलिए इस आर्टिकल को शुरू से लेकर अंत तक ज़रूर पढ़ें.
दोस्तों CSS लिखना एक महाभारत होती है क्योंकि मैं ख़ुद जब CSS लिखता हूँ तो मुझे पता है कि एक फाइल में कितना ज़्यादा कोड लिखना होता है और यह भी ध्यान रखना होता है कि कहीं एक ही क्लास पर दो बार CSS तो नहीं हो गई.
इसी समस्या का समाधान Adam Wathan लेकर आया और Tailwind CSS बनाया आगे इस आर्टिकल में आप Tailwind के बारे मे और ज़्यादा गहराई में जानने वाले हैं.
Tailwind CSS In Hindi
Tailwind CSS एक लाइब्रेरी है या कह सकते हैं कि यह एक CSS का Framework है जिसको CSS की सहायता से बनाया गया है. कुछ लोग Tailwind CSS को CMS समझते हैं जो की ग़लत है क्योंकि यह कोई CMS नहीं है यह एक लाइब्रेरी है जो की काफ़ी ज़्यादा flexible और customisable है जिसकी सहायता से डेवलपर्स HTML elements को काफ़ी कम समय में डिज़ाइन और responsive कर सकते हैं.
इस लाइब्रेरी में typography, spacing, colors, और backgrounds और वो सभी चीजें शामिल है जो की एक वेब पेज बनाने के लिए उपयोग में आती हैं.
Tailwind CSS को सभी प्रकार के projects के लिए काम में लिया जा सकता है चाहे project छोटा हो या फिर बड़ा इसमें डेवलपर्स का एक बड़ा समुदाय है जो resources और support प्रदान करता है, जिससे यह उन डेवलपर्स के लिए एक बढ़िया विकल्प बन जाता है जो जल्दी और efficiently से beautiful और responsive वेबसाइट बनाना चाहते हैं.
Tailwind CSS का इस्तेमाल कैसे करें
दोस्तों इसका इस्तेमाल करने से पहले आपको यह ज़रूर ध्यान होना चाहिए कि आप अपना वेबपेज कौनसी टेक्नोलॉजी या फ्रेमवर्क में बना रहे हैं क्योंकि इसका इस्तेमाल करने के लिए इस लाइब्रेरी को लिंक करना ज़रूरी होता है तो इसके लिए अलग-अलग तरीक़े हैं लेकिन सभी तरीक़े काफ़ी आसान है.
Tailwind CSS in HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl p-3 font-bold bg-gradient-to-r from-cyan-500 to-blue-500">Hello world!</h1>
</body>
</html>
Tailwind CSS in React
इसके लिए आपको सबसे पहले अपने terminal में जाना है और अपनी एप्लीकेशन के फोल्डर तक पाथ सेलेक्ट करना है बाद में आप नीचे दी गई command को हिट कर सकते हैं.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
जैसे ही आप यह command enter करते हैं तोह आपके एप्लीकेशन के फ़ोडर में अपने आप एक tailwind.config.js नाम से फाइल बन जाएगी जिसको एडिट करना होगा और नीचे दिया हुवा कोड paste करना है.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
कोड पेस्ट करने के बाद आप अपने components बना सकते हैं बड़े ही आराम से.
import React from 'react'
function App() {
return (
<div className='bg-zinc-200 p-4'>
<h1 className='underline'>Hello</h1>
</div>
)
}
export default App
Tailwind CSS in WordPress
अगर आप इसका इस्तेमाल wordpress में करना चाहते हैं तो इसके भी 3 तरीक़े हैं जिसकी सहायता से आप tailwind का इस्तेमाल कर के कस्टम designs बना सकते हैं.
पहला:- पहले तरीक़े में आपको अपने theme की header.php में जाना है और head tag के अंदर यह script डालनी है.
<script src=”https://cdn.tailwindcss.com”></script>
दूसरा:- दूसरे तरीक़े में आपको अपने theme की footer.php में जाना है और body tag के close होने से पहले यह script डालनी है.
<script src=”https://cdn.tailwindcss.com”></script>
तीसरा:- तीसरा और सबसे बेहतर तरीक़ा है कि आप आपने function.php में जायें और नीचे दिये गये कोड को पेस्ट करें.
function custom_theme_scripts() {
wp_enqueue_script( 'tailwind', 'https://cdn.tailwindcss.com', true );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_scripts' );
Tailwind CSS के फ़ायदे
इसके इस्तेमाल करने के कई फ़ायदे है जो इसे front-end development के लिए एक popular choice बनाते हैं:
Utility-First Approach
इसका मतलब यह है कि tailwind में पहले से define utility classes मिलती हैं जिनके इस्तेमाल से आप बारीक से बारीक डिज़ाइन को बिना सकते हैं बिना CSS के इस्तेमाल किए.
Consistency
Tailwind के इस्तेमाल से consistent design बनाना काफ़ी आसान हो जाता है चाहे वह कोई छोटा प्रोजेक्ट हो या फिर बड़ा प्रोजेक्ट सभी प्रोजेक्ट में डिज़ाइन एक जैसी बनना काफ़ी आसान होता है.
Customisation
Tailwind एक highly customizable फ्रेमवर्क है जिसको आप अपने प्रोजेक्ट के अनुसार पूरी तरीक़े से customize कर सकते हैं, आप डिज़ाइन को configure करने के लिए इसकी configuration file (tailwind.config.js) में अपने प्रोजेक्ट के अनुसार भी कोड लिख सकते हैं जिसमें आप color palette, spacing scale, typography और भी काफ़ी चीजें अपने अनुसार कर सकते हैं.
Responsive Design
Tailwind CSS में पहले से डिफाइन responsive design utilities मिलती हैं जिससे रेस्पॉन्सिव काफ़ी आसानी से और अपने-आप बनती है आपको सिर्फ़ classes का पता होना चाहिए जैसे की sm:
, md:
, lg:
, and xl:
Performance
Tailwind CSS highly optimised कोड प्रदान करता है यानी की यह पूरी CSS को लोड नहीं करता आपके प्रोजेक्ट में यह सिर्फ़ वही CSS को लोड करता है जिसकी classes आपने इस्तेमाल की है.
Conclusion
Modern frontend development के दायरे में Tailwind CSS का काफ़ी ज़्यादा इस्तेमाल होने लगा है जिसका सबसे बड़ा कारण है कि इसमें आपको छोटी से छोटी चीज के लिए भी utility classes मिल जाती है जिसके इस्तेमाल से डेवलपर CSS की चिंता को छोड़कर सिर्फ़ requirement पर ध्यान देता है और काफ़ी कम टाइम में काफ़ी अच्छी वेबसाइट तैयार कर देता है.
उम्मीद है दोस्तों आज के आर्टिकल Tailwind CSS In Hindi में आपने कुछ नया ज़रूर सीखा होगा.