रेल के साथ टेलविंड सीएसएस का उपयोग करना

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

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

Tailwind CSS क्या है

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

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

<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>

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

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

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

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

• रेल 6.1
• रूबी 3.0.0

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

यदि आप आरबीएनवी का उपयोग कर रहे हैं, तो आप रूबी 3.0.0 को rbenv install 3.0.0 के साथ स्थापित कर सकते हैं ।

फिर, आप अपनी वर्तमान निर्देशिका को rbenv local 3.0.0 . के साथ रूबी 3.0.0 में बदल सकते हैं ।

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

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

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

इसके बाद, नई परियोजना निर्देशिका में बदलें:cd tailwind-example ।

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

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

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

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

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

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

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

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

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

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

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so that it will be compiled.

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()

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

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

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

इसका परीक्षण करना

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

इसके बाद, उपयोगकर्ता तालिका बनाने के लिए डेटाबेस माइग्रेशन चलाएँ:rake db:migrate ।

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

Rails.application.routes.draw do
  root 'users#index'
  resources :users
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

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

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

1. कोई उपयोगकर्ता नहीं हैं।
2. यह बदसूरत है।

हमारे लिए उपयोग . द्वारा पहली समस्या को ठीक करना आसान है आवेदन ही। टेलविंड दूसरे ऑन में हमारी मदद करेगा। आगे बढ़ें और अनुक्रमणिका पृष्ठ पर "नया उपयोगकर्ता" लिंक पर क्लिक करें और नकली पासवर्ड वाले कुछ उपयोगकर्ता बनाएं।

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

<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>

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

PurgeCSS के साथ एसेट साइज कम करना

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

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

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

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

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

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

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

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

समय बचाने के लिए Tailwind CSS Classes का उपयोग करना

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

उपयोगकर्ता अनुक्रमणिका पृष्ठ को स्टाइल करना

अपने इंडेक्स पेज के लिए हम जो पहली चीज करेंगे, वह है सभी टेबल स्टफ को एक डिव में रखना, ताकि हम कुछ शैलियों को समग्र रूप से लागू कर सकें। हम उस div को 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>
        <th colspan="3">Actions</th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr class="border-4 border-gray-200">
          <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, class: "bg-indigo-500 text-white px-4 py-2 border rounded-md hover:bg-white hover:border-indigo-500 hover:text-black" %>
<div>

इन परिवर्तनों को जोड़ने से हमारे उपयोगकर्ता अनुक्रमणिका पृष्ठ में ऐसा दिखाई देता है:

नए उपयोगकर्ता पेज को स्टाइल करना

जब तक हम इस पर काम कर रहे हैं, आइए मौजूदा "नया उपयोगकर्ता" पृष्ठ को फिर से स्टाइल करें। वर्तमान में, यह इस तरह दिखता है:

सबसे पहले, हम अपनी वांछित कक्षाओं को उपयोगकर्ताओं के लिए नए दृश्य में लागू करेंगे। यहाँ मेरा कैसा दिखता है:

<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>

अब, यह बहुत अच्छा है सिवाय इसके कि फ़ॉर्म को अभी तक स्टाइल नहीं किया गया है! app/views/users/_form.html.erb . में , हमें अभी भी कुछ संपादन करने की आवश्यकता है। यहाँ मेरा कैसा दिखता है:

<%= 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 %>

यह बहुत सारे संपादन और कुछ वर्ग हैं जिनके बारे में हमने बात नहीं की है, लेकिन आपको जो कुछ भी चाहिए वह दस्तावेज़ीकरण में शामिल है। इन कक्षाओं को लागू करने के बाद, हमारा नया उपयोगकर्ता पृष्ठ अब इस तरह दिखता है!

किसी मौजूदा ऐप्लिकेशन में Tailwind जोड़ना

संभावनाएं अच्छी हैं कि यदि आप टेलविंड का उपयोग करना चाहते हैं, तो आप एक खाली स्लेट से शुरू नहीं कर रहे हैं। आपके पास शायद एक मौजूदा प्रोजेक्ट है जिसमें बहुत सारे कस्टम सीएसएस और यहां तक ​​​​कि अन्य ढांचे, जैसे बूटस्ट्रैप। यह बिल्कुल ठीक है!

यह मानते हुए कि आपका मौजूदा एप्लिकेशन वेबपैकर के साथ चल रहा है, आप बिना किसी बदलाव के "टेलविंड सीएसएस स्थापित करना" में उल्लिखित चरणों का पालन कर सकते हैं! यदि आपके पास वेबपैकर स्थापित नहीं है, तो इसे जेमफाइल में जोड़ें, bundle install चलाएं और फिर bundle exec rails webpacker:install , और फिर टेलविंड स्थापना चरणों का पालन करें।

फिर आप अपने मौजूदा सीएसएस और टेलविंड सीएसएस के साथ मिक्स एंड मैच कर सकते हैं!

हैप्पी स्टाइलिंग!