रूबी ऑन रेल्स में टेलविंड CSS जोड़ें: एक व्यावहारिक चरण-दर-चरण गाइड

CSS जादुई है लेकिन समय लेने वाला। सुंदर, कार्यात्मक, और सुलभ साइट्स उपयोग करने में आनंददायक हैं, लेकिन अपना खुद का CSS लिखना थकाऊ है। कई CSS लाइब्रेरी, जैसे बूटस्ट्रैप, हाल के वर्षों में विस्फोट हुए हैं, और टेलविंड 2021 में पैक का नेतृत्व कर रहा है।

हालांकि रेल्स टेलविंड के साथ बॉक्स से बाहर नहीं आता है, यह लेख आपको दिखाएगा कि एक नए रूबी ऑन रेल्स प्रोजेक्ट में टेलविंड CSS कैसे जोड़ें, जो आपको डिज़ाइन कार्यान्वयन में घंटों बचाएगा। हम टेलविंड के यूटिलिटी क्लासेस का उपयोग करके डिज़ाइनिंग के माध्यम से भी चलेंगे! इस ट्यूटोरियल का पहला भाग बताएगा कि एक नया रेल्स प्रोजेक्ट कैसे बनाएं और शुरुआत से टेलविंड जोड़ें। बाद के भाग में, मैं आपको दिखाऊंगा कि किसी मौजूदा प्रोजेक्ट में टेलविंड कैसे जोड़ें।

टेलविंड CSS क्या है

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

उदाहरण के लिए, आप केवल उन एलिमेंट्स पर कुछ क्लासेस लागू करके एक अच्छा हेडर के साथ एक कार्ड व्यू बना सकते हैं जिन्हें आप स्टाइल करना चाहते हैं:

<div class="text-center max-w-sm rounded overflow-hidden shadow-lg"> 
  <h1 class="text-3xl font-black">This is a styled header inside a styled card element.</h1> 
</div> 

बस इतना ही! आपको इन क्लासेस को परिभाषित करने और इसे अपने इच्छित तरीके से दिखाने के लिए CSS से लड़ने की ज़रूरत नहीं है। टेलविंड ने पहले से ही सबसे आम स्टाइलिंग जरूरतों को पूरा करने के लिए पर्याप्त यूटिलिटी क्लासेस परिभाषित की हैं।

इसने पिछले साल तेजी से लोकप्रियता हासिल की है क्योंकि डेवलपर्स के लिए समय बचाने का एक तरीका है जबकि लगातार अच्छी तरह से डिज़ाइन किए गए इंटरफेस बना रहे हैं। कुछ डेवलपर्स इन कारणों से टेलविंड से प्यार करते हैं, और अन्य आपके HTML में इसके द्वारा बनाई गई गड़बड़ी के लिए इससे नफरत करते हैं।

एक नए रेल्स ऐप के साथ टेलविंड सेट करना

सरलता के लिए, हम स्क्रैच से एक ऐप बनाने और एक नया रेल्स एप्लिकेशन बनाने को कवर करेंगे। हम उदाहरणों के लिए निम्नलिखित संस्करणों का उपयोग करेंगे:

• रेल्स 6.1
• रूबी 3.0.0

rbenv विभिन्न रूबी संस्करणों को प्रबंधित करने का एक बहुत ही मानकीकृत तरीका है। यदि आपके पास होमब्रू है, तो आप इसे brew install rbenv के साथ इंस्टॉल कर सकते हैं।

यदि आप rbenv का उपयोग कर रहे हैं, तो आप rbenv install 3.0.0 के साथ रूबी 3.0.0 इंस्टॉल कर सकते हैं।

फिर, आप अपने वर्तमान डायरेक्टरी को rbenv local 3.0.0 के साथ रूबी 3.0.0 पर स्विच कर सकते हैं।

यदि यह रूबी का एक नया संस्करण है, तो आप gem install rails का उपयोग करना चाहेंगे।

एक नया रेल्स एप्लिकेशन बनाना

अब जब आप रेल्स 6.1 और रूबी 3.0 के साथ जाने के लिए तैयार हैं, तो आप rails new tailwind-example चलाकर एक नया रेल्स एप्लिकेशन बना सकते हैं। tailwind-example को अपने प्रोजेक्ट के लिए किसी अन्य नाम से बदलें, लेकिन ध्यान दें कि आपको किसी अन्य कोड/शेल संदर्भ में प्रोजेक्ट नाम को भी स्वैप करना होगा।

अगला, नई प्रोजेक्ट डायरेक्टरी में बदलें: cd tailwind-example।

अंत में, स्थानीय रूप से अपने प्रोजेक्ट को सर्व करें यह सत्यापित करने के लिए कि सब कुछ सही ढंग से काम कर रहा है: rails server। फिर, अपने ब्राउज़र में localhost:3000 पर जाएं रेल्स वेलकम पेज देखने के लिए! यदि आप ऐसा कुछ देखते हैं, तो आप सही रास्ते पर हैं:

एक नए रेल्स ऐप के साथ चालू और चल रहा है, आप टेलविंड जोड़ने और तेजी से इंटरफेस बनाने के लिए तैयार हैं।

टेलविंड CSS इंस्टॉल करना

सबसे पहले, yarn add tailwindcss चलाकर टेलविंडCSS को एक निर्भरता के रूप में जोड़ें।

अगला, उचित स्थान पर एक टेलविंड कॉन्फ़िगरेशन फाइल बनाने के लिए निम्न कमांड का उपयोग करें: npx tailwindcss init।

अब, अपना प्रोजेक्ट और अपनी पसंद का IDE खोलें (VS कोड के लिए हुर्रे!)। अपने प्रोजेक्ट के रूट डायरेक्टरी में postcss.config.js फाइल खोलें और आयात की सूची में require("tailwindcss"), जोड़ें। यहां मेरा postcss फाइल अब जैसा दिखता है:

module.exports = { 
  plugins: [ 
    require('postcss-import'), 
    require('postcss-flexbugs-fixes'), 
    require("tailwindcss"), 
    require('postcss-preset-env')({ 
      autoprefixer: { 
        flexbox: 'no-2009' 
      }, 
      stage: 3 
    }) 
  ] 
} 

अगला, app/javascript में application.css नामक एक फाइल बनाएं। CSS फाइल के अंदर, निम्नलिखित आयात जोड़ें:

@import "tailwindcss/base"; 
@import "tailwindcss/utilities"; 
@import "tailwindcss/components"; 

अगला, app/javascript/packs/application.js में आयात की सूची में import "../application.css"; जोड़ें। यह टेलविंड आयात को वेबपैकर में लाता है। फाइल को ऐसा दिखना चाहिए:

// यह फाइल वेबपैक द्वारा स्वचालित रूप से संकलित की जाती है, साथ में 
// इस डायरेक्टरी में मौजूद कोई अन्य फाइल। आपको अपनी वास्तविक एप्लिकेशन लॉजिक को 
// app/javascript के भीतर एक प्रासंगिक संरचना में रखने के लिए प्रोत्साहित किया जाता है और केवल इन पैक फाइलों का उपयोग 
// उस कोड को संदर्भित करने के लिए करें ताकि इसे संकलित किया जाए। 
import Rails from "@rails/ujs" 
import Turbolinks from "turbolinks" 
import * as ActiveStorage from "@rails/activestorage" 
import "channels" 
import "../application.css"; 
Rails.start() 
Turbolinks.start() 
ActiveStorage.start() 

अपने एप्लिकेशन में टेलविंड का उपयोग करने के लिए, आपको इस वेबपैक संदर्भ को आयात करना होगा। app/view/layouts/application.html.erb में

टेलविंड को PostCSS 88 की आवश्यकता है, और रेल्स 6 ने अभी तक अपडेट नहीं किया है। उनके डॉक्यूमेंटेशन के लिए धन्यवाद, हम टेलविंड के कम्पैटिबिलिटी बिल्ड को इंस्टॉल करके इस समस्या को आसानी से ठीक कर सकते हैं। इसे ठीक करने के लिए बस निम्नलिखित चलाएं:

npm uninstall tailwindcss postcss autoprefixer 
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 

इसे टेस्ट करना

हमारे नए CSS लाइब्रेरी को दिखाने के लिए, हम एक नया व्यू, कंट्रोलर, और मॉडल बनाएंगे। यह रेल्स स्कैफोल्डिंग के साथ आसान है: rails generate scaffold User email:string password:string।

अगला, User टेबल बनाने के लिए डेटाबेस माइग्रेशन चलाएं: rake db:migrate।

अब हमारे पास एक यूज़र मॉडल और व्यूज़ और कंट्रोलर एक्शन दोनों के साथ बुनियादी CRUD क्षमताएं हैं। आइए आगे बढ़ें और यूज़र्स के इंडेक्स पेज को हमारे एप्लिकेशन की रूट के रूप में सेट करें। config/routes.rb में root 'users#index' जोड़कर ऐसा करें। आपकी रूट्स फाइल अब इस तरह दिखनी चाहिए:

Rails.application.routes.draw do 
  root 'users#index' 
  resources :users 
  # इस फाइल में उपलब्ध DSL के विवरण के लिए, देखें https://guides.rubyonrails.org/routing.html 
end 

यह एप्लिकेशन की रूट पर किसी भी ट्रैफिक को हमारे यूज़र्स के इंडेक्स पेज पर निर्देशित करता है। rails server के साथ अपने रेल्स सर्वर को रीस्टार्ट करें, और जब आप अब localhost:3000 पर जाएं, तो आपको ऐसा कुछ देखना चाहिए:

यह दो कारणों से बहुत दिलचस्प नहीं है:

1. कोई यूज़र्स नहीं हैं।
2. यह बदसूरत है।

पहली समस्या को एप्लिकेशन का उपयोग करके उपयोग करके ठीक करना आसान है। टेलविंड दूसरी समस्या में हमारी मदद करेगा। आगे बढ़ें और इंडेक्स पेज पर "New User" लिंक पर क्लिक करें और नकली पासवर्ड के साथ कुछ यूज़र्स बनाएं।

अब, यह पुष्टि करने के लिए कि हमने अपने प्रोजेक्ट के साथ टेलविंड CSS को ठीक से सेट किया है, आइए app/views/users/index.html.erb के बहुत ऊपर निम्नलिखित HTML जोड़ें:

<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10"> 
  <h1 class="mb-4 text-3xl font-black">Here are all our users!</h1> 
  <p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p> 
</div> 

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

PurgeCSS के साथ एसेट आकार कम करना

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

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

प्रोजेक्ट के रूट डायरेक्टरी में tailwind.config.js फाइल खोलें। यह अब ऐसा दिखना चाहिए:

module.exports = { 
  purge: [], 
  darkMode: false, 
  // or 'media' or 'class' 
  theme: { 
    extend: {}, 
  }, 
  variants: { 
    extend: {}, 
  }, 
  plugins: [], 
} 

सुविधाजनक रूप से, हमें बस उस फाइल पथ को देना है जहां हमने टेलविंड CSS क्लासेस का उपयोग किया होगा। इस उदाहरण के लिए, हमने केवल अपने .html.erb फाइलों में टेलविंड का उपयोग किया, इसलिए हम केवल उसके लिए पथ प्रदान करेंगे। हालांकि, यदि आपका एप्लिकेशन भारी फ्रंट-एंड का उपयोग करता है, जैसे React या Vue, तो आप उन पथों को भी प्रदान करना चाहेंगे।

हमारे पथों को कॉन्फ़िग फाइल में जोड़ने के बाद, यह ऐसा दिखना चाहिए:

module.exports = { 
  purge: [ 
    "./app/**/*.html.erb", 
  ], 
  darkMode: false, 
  // or 'media' or 'class' 
  theme: { 
    extend: {}, 
  }, 
  variants: { 
    extend: {}, 
  }, 
  plugins: [], 
} 

इस कॉन्फ़िगरेशन के साथ, जब आप अपने NODE_ENV को production पर सेट करके संकलित करते हैं तो अनुपयोगी CSS क्लासेस को बाहर रखा जाएगा।

टेलविंड CSS क्लासेस का उपयोग करके समय बचाना

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

यूज़र इंडेक्स पेज को स्टाइल करना

पहली चीज जो हम अपने इंडेक्स पेज के लिए करेंगे वह है सभी टेबल सामान को एक डिव में रखना, ताकि हम पूरी तरह से कुछ स्टाइल लागू कर सकें। हम उस डिव को class="p-10" की एक क्लास देंगे जो 10px का पैडिंग है। हम अपने यूज़र्स के लिए h1 टैग पर कुछ स्टाइलिंग भी लागू करेंगे। नीचे आपको जो 3 क्लासेस दिखाई देंगी वे ज्यादातर आत्म-व्याख्यात्मक हैं, लेकिन यह ध्यान देने योग्य है कि mb-4 का अर्थ है नीचे 4px का मार्जिन जोड़ना। इन परिवर्तनों के बाद, यूज़र इंडेक्स पेज को ऐसा पढ़ना चाहिए:

<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10"> 
  <h1 class="mb-4 text-3xl font-black">Here are all our users!</h1> 
  <p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p> 
</div> 
<div class="p-10"> 
  <h1 class="mb-4 text-4xl font-black">Users</h1> 
  <table> 
    <thead> 
      <tr> 
        <th>Email</th> 
        <th>Password</th> 
        <th colspan="3">Actions</th> 
      </tr> 
    </thead> 
    <tbody> 
      <% @users.each do |user| %> 
        <tr> 
          <td><%= user.email %></td> 
          <td><%= user.password %></td> 
          <td><%= link_to 'Show', user %></td> 
          <td><%= link_to 'Edit', edit_user_path(user) %></td> 
          <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
        </tr> 
      <% end %> 
    </tbody> 
  </table> 
  <br> 
  <%= link_to 'New User', new_user_path %> 
<div> 

यह काफी बुनियादी है, तो आइए इसे थोड़ा और मसाला दें। मैंने टेबल और बटन के लिए कुछ क्लासेस जोड़ीं, और मेरा परिणामी कोड यह है:

<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10"> 
  <h1 class="mb-4 text-3xl font-black">Here are all our users!</h1> 
  <p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p> 
</div> 
<div class="p-10"> 
  <h1 class="mb-4 text-4xl font-black">Users</h1> 
  <table class="min-w-full table-auto"> 
    <thead class="bg-gray-800 text-gray-300" > 
      <tr> 
        <th>Email</th> 
        <th>Password</th> 
        

<div class="bg-grey-lighter min-h-screen flex flex-col"> 
  <div class="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2"> 
    <div class="bg-white px-6 py-8 rounded shadow-lg text-black w-full"> 
      <h1 class="mb-8 text-3xl text-center">Sign up</h1> 
      <%= render 'form', user: @user %> 
      <div class="text-center text-sm text-grey-dark mt-4"> 
        By signing up, you agree to the <a class="no-underline border-b border-grey-dark text-grey-dark" href="#"> Terms of Service </a> and <a class="no-underline border-b border-grey-dark text-grey-dark" href="#"> Privacy Policy </a> 
      </div> 
    </div> 
    <div class="text-grey-dark mt-6"> 
      Already have an account? <%= link_to 'Sign In', '#', class: "no-underline border-b border-blue text-blue"%> 
    </div> 
  </div> 
</div> 

<%= form_with(model: user) do |form| %> 
  <% if user.errors.any? %> 
    <div id="error_explanation"> 
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2> 
      <ul> 
        <% user.errors.each do |error| %> 
          <li><%= error.full_message %></li> 
        <% end %> 
      </ul> 
    </div> 
  <% end %> 
  <div class="field"> 
    <%= form.label :email %> 
    <%= form.text_field :email, class: "block border border-grey-light w-full p-3 rounded mb-4" %> 
  </div> 
  <div class="field"> 
    <%= form.label :password %> 
    <%= form.text_field :password, class: "block border border-grey-light w-full p-3 rounded mb-4" %> 
  </div> 
  <%= form.submit "Sign Up", class: "w-full text-center py-3 rounded bg-indigo-600 text-white hover:bg-green-dark focus:outline-none" %> 
<% end %>