কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> Ruby

রেলের সাথে Tailwind CSS ব্যবহার করা

CSS যাদুকর কিন্তু সময়সাপেক্ষ। সুন্দর, কার্যকরী, এবং অ্যাক্সেসযোগ্য সাইটগুলি ব্যবহার করা একটি আনন্দ, কিন্তু আমাদের নিজস্ব CSS লেখা ক্লান্তিকর। সাম্প্রতিক বছরগুলিতে বুটস্ট্র্যাপের মতো অনেক CSS লাইব্রেরি বিস্ফোরিত হয়েছে এবং টেইলউইন্ড 2021 সালে প্যাকে নেতৃত্ব দিচ্ছে৷

যদিও Rails বাক্সের বাইরে টেইলউইন্ডের সাথে আসে না, এই নিবন্ধটি আপনাকে দেখাবে কীভাবে একটি নতুন রুবি অন রেল প্রকল্পে টেইলউইন্ড সিএসএস যুক্ত করবেন, যা ডিজাইন বাস্তবায়নে আপনার ঘন্টা বাঁচাবে। আমরা টেইলউইন্ডের ইউটিলিটি ক্লাস ব্যবহার করে ওয়াক-থ্রু ডিজাইনিং করব! এই টিউটোরিয়ালের প্রথম অংশে ব্যাখ্যা করা হবে কিভাবে একটি নতুন রেল প্রকল্প তৈরি করতে হয় এবং শুরু থেকেই Tailwind যোগ করতে হয়। পরবর্তী অংশে, আমি আপনাকে দেখাব কিভাবে একটি বিদ্যমান প্রকল্পে Tailwind যোগ করতে হয়।

টেইলউইন্ড CSS কি

Tailwind CSS ডেভেলপারদের ইউটিলিটি ক্লাসের মাধ্যমে ক্ষমতায়ন করে। এই পূর্বনির্ধারিত-সংজ্ঞায়িত CSS ক্লাসগুলি আপনাকে সরাসরি 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 এ যে বিশৃঙ্খলা সৃষ্টি করে।

একটি নতুন রেল অ্যাপ দিয়ে টেলউইন্ড সেট আপ করা হচ্ছে

সরলতার জন্য, আমরা স্ক্র্যাচ থেকে একটি অ্যাপ তৈরি করা এবং একটি নতুন রেল অ্যাপ্লিকেশন তৈরি করা কভার করব। আমরা উদাহরণগুলির জন্য নিম্নলিখিত সংস্করণগুলি ব্যবহার করব:

  • রেল ৬.১
  • রুবি 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 ব্যবহার করতে চাইবেন .

একটি নতুন রেল অ্যাপ্লিকেশন তৈরি করা

এখন যেহেতু আপনি Rails 6.1 এবং Ruby 3.0 এর সাথে যেতে প্রস্তুত, আপনি rails new tailwind-example চালিয়ে একটি নতুন Rails অ্যাপ্লিকেশন তৈরি করতে পারেন tailwind-example প্রতিস্থাপন করুন আপনার প্রকল্পের জন্য অন্য কোনো নামের সাথে, কিন্তু মনে রাখবেন যে আপনাকে প্রকল্পের নামের অন্য কোনো কোড/শেল রেফারেন্সে এটি অদলবদল করতে হবে।

এরপরে, নতুন প্রকল্প ডিরেক্টরিতে পরিবর্তন করুন:cd tailwind-example .

অবশেষে, সবকিছু সঠিকভাবে কাজ করছে কিনা তা যাচাই করতে আপনার প্রকল্পটি স্থানীয়ভাবে পরিবেশন করুন:rails server তারপরে, localhost:3000-এ নেভিগেট করুন আপনার ব্রাউজারে রেলের স্বাগত পৃষ্ঠা দেখতে! আপনি যদি এরকম কিছু দেখতে পান, আপনি সঠিক পথে আছেন:রেলের সাথে Tailwind CSS ব্যবহার করা

একটি নতুন Rails অ্যাপ চালু এবং চলমান থাকলে, আপনি Tailwind যোগ করতে এবং দ্রুত ইন্টারফেস তৈরি করতে প্রস্তুত৷

টেইলউইন্ড সিএসএস ইনস্টল করা হচ্ছে

প্রথমে,yarn add tailwindcss চালিয়ে নির্ভরতা হিসাবে TailwindCSS যোগ করুন .

এরপরে, সঠিক জায়গায় একটি টেইলউইন্ড কনফিগারেশন ফাইল তৈরি করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:npx tailwindcss init .

এখন, আপনার প্রকল্প এবং আপনার পছন্দের IDE খুলুন (ভিএস কোডের জন্য হুররে!) 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-এ

Tailwind-এর জন্য PostCSS 88 প্রয়োজন, এবং Rails 6 এখনও আপডেট হয়নি। তাদের ডকুমেন্টেশনের জন্য ধন্যবাদ, আমরা Tailwind-এর সামঞ্জস্যতা বিল্ড ইনস্টল করে সহজেই এই সমস্যাটি সমাধান করতে পারি। এটি ঠিক করতে নিম্নলিখিতটি চালান:

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 .

এরপরে, ইউজার টেবিল তৈরি করতে ডাটাবেস মাইগ্রেশন চালান:rake db:migrate .

আমাদের কাছে এখন একটি ব্যবহারকারীর মডেল এবং মৌলিক CRUD ক্ষমতা রয়েছে যেখানে উভয় ভিউ এবং কন্ট্রোলার অ্যাকশন রয়েছে। আসুন এগিয়ে যান এবং ব্যবহারকারীদের সূচী পৃষ্ঠাটি আমাদের অ্যাপ্লিকেশনের মূল হিসাবে সেট করি। 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 দিয়ে আপনার Rails সার্ভার পুনরায় চালু করুন , এবং আপনি যখন localhost:3000 এ যান এখন, আপনি এই মত কিছু দেখতে হবে:রেলের সাথে Tailwind CSS ব্যবহার করা

এটি দুটি কারণে খুব আকর্ষণীয় নয়:

  1. কোন ব্যবহারকারী নেই৷
    2. ৷
  2. এটা কুৎসিত।

ব্যবহার করে প্রথম সমস্যাটি সমাধান করা আমাদের পক্ষে সহজ৷ আবেদন নিজেই. টেইলউইন্ড আমাদেরকে দ্বিতীয় চালু করতে সাহায্য করবে। এগিয়ে যান এবং ইনডেক্স পৃষ্ঠায় "নতুন ব্যবহারকারী" লিঙ্কে ক্লিক করুন এবং জাল পাসওয়ার্ড দিয়ে কিছু ব্যবহারকারী তৈরি করুন৷

এখন, আমাদের প্রোজেক্টের সাথে সঠিকভাবে Tailwind 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>

এটি একটি শিরোনাম এবং ভিতরে একটি অনুচ্ছেদ সহ একটি ডিভ। প্রতিটিকে কিছুটা টেলউইন্ড সিএসএস দিয়ে স্টাইল করা হয়েছে। আপনি বলতে পারেন, স্টাইল করার জন্য আমাদের যা করতে হয়েছিল তা হল প্রতিটি উপাদানে উপযুক্ত ক্লাস যুক্ত করা। এটি সঠিকভাবে কনফিগার করা থাকলে, আপনার ব্যবহারকারীর পৃষ্ঠাটি এখন এইরকম হওয়া উচিত:রেলের সাথে Tailwind CSS ব্যবহার করা

PurgeCSS এর মাধ্যমে সম্পদের আকার হ্রাস করা

Tailwind CSS সম্পদ আসলে বিশাল। আপনি সম্ভবত কল্পনা করতে পারেন, এই সমস্ত ইউটিলিটি ক্লাসের সংজ্ঞা যোগ করে। তারপরে, আপনি আসলে ব্যবহার করছেন এমন সংজ্ঞাগুলি অন্তর্ভুক্ত করার জন্য এটি বোধগম্য হয়। ভাগ্যক্রমে, Tailwind CSS একটি বিল্ট-ইন purge সহ আসে বৈশিষ্ট্য যে ঠিক যে! এমনকি আপনাকে ম্যানুয়ালি বাছাই করতে হবে না এবং কী থাকবে এবং কী যাবে তা বেছে নিতে হবে৷

আপনাকে যা করতে হবে তা হল Tailwind-এর কনফিগারেশন কোথায় দেখতে হবে এবং এটি স্বয়ংক্রিয়ভাবে যেকোন অব্যবহৃত CSS ক্লাসের সংজ্ঞাগুলি দিয়ে যাবে এবং মুছে ফেলবে। এটি আমাদের ফাইলের আকার এবং জন্য আমাদের অ্যাপ্লিকেশন অপ্টিমাইজ করতে দেয় যে কোনো সময়ে আরও ইউটিলিটি ক্লাস ব্যবহার করার বিকল্প বজায় রাখার সময় পারফরম্যান্স।

tailwind.config.js খুলুন প্রকল্পের রুট ডিরেক্টরিতে ফাইল করুন। এটা এখন এই মত হওয়া উচিত:

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

সুবিধাজনকভাবে, আমাদের যা করতে হবে তা হল যে কোনও জায়গায় আমরা টেলউইন্ড সিএসএস ক্লাস ব্যবহার করতে পারি। এই উদাহরণের জন্য, আমরা শুধুমাত্র আমাদের .html.erb-এ Tailwind ব্যবহার করেছি ফাইল, যাতে আমরা পাথ প্রদান করব। যাইহোক, যদি আপনার অ্যাপ্লিকেশনটি একটি ভারী ওজনের ফ্রন্ট-এন্ড ব্যবহার করে, যেমন প্রতিক্রিয়া বা Vue, আপনি এই পথগুলিও প্রদান করতে চাইবেন৷

কনফিগার ফাইলে আমাদের পাথ যোগ করার পর, এটি দেখতে এইরকম হওয়া উচিত:

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

এই কনফিগারেশনের মাধ্যমে, আপনি যখন আপনার NODE_ENV দিয়ে কম্পাইল করবেন তখন অব্যবহৃত CSS ক্লাস বাদ দেওয়া হবে। production এ সেট করুন .

সময় বাঁচাতে Tailwind CSS ক্লাস ব্যবহার করা

Tailwind CSS-এর পুরো পয়েন্ট হল আপনাকে আরও ভাল, আরও ধারাবাহিকভাবে এবং দ্রুত ডিজাইন করতে সাহায্য করা। আপনার পৃষ্ঠা স্টাইল করা সঠিক শ্রেণীর নাম যোগ করার মতোই সহজ। ডকুমেন্টেশনের মাধ্যমে নজর দেওয়া নিজেকে ওরিয়েন্টেড করার জন্য অত্যন্ত সহায়ক, তবে আসুন আমাদের ব্যবহারকারীর মতামত তৈরি করে আপনাকে কিছুটা ধারণা দিতে পারি যে Tailwind স্টাইলিং কতটা সহজ করে তোলে।

ব্যবহারকারী সূচক পৃষ্ঠা স্টাইল করা

আমাদের সূচী পৃষ্ঠার জন্য আমরা প্রথমে যা করব তা হল সমস্ত টেবিলের জিনিসগুলিকে একটি ডিভিতে রাখা, যাতে আমরা সামগ্রিকভাবে কিছু শৈলী প্রয়োগ করতে পারি। আমরা সেই ডিভটিকে 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>

এই পরিবর্তনগুলি যুক্ত করার ফলে আমাদের ব্যবহারকারীর সূচী পৃষ্ঠাতে এইরকম দেখায়:রেলের সাথে Tailwind CSS ব্যবহার করা

নতুন ব্যবহারকারীর পৃষ্ঠা স্টাইল করা

আমরা যখন এটিতে আছি, আসুন বিদ্যমান "নতুন ব্যবহারকারী" পৃষ্ঠাটিকে পুনরায় স্টাইল করি। বর্তমানে, এটি এই মত দেখায়:রেলের সাথে Tailwind CSS ব্যবহার করা

প্রথমত, আমরা ব্যবহারকারীদের জন্য নতুন ভিউতে আমাদের কাঙ্খিত ক্লাস প্রয়োগ করব। আমার দেখতে কেমন তা এখানে:

<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 CSS ব্যবহার করা

একটি বিদ্যমান অ্যাপে Tailwind যোগ করা

অডস ভাল যে আপনি যদি টেলউইন্ড ব্যবহার করতে চান তবে আপনি একটি ফাঁকা স্লেট থেকে শুরু করছেন না। আপনার সম্ভবত অনেকগুলি কাস্টম CSS এবং এমনকি বুটস্ট্র্যাপের মতো অন্যান্য ফ্রেমওয়ার্ক সহ একটি বিদ্যমান প্রকল্প রয়েছে। এটা একেবারেই ভালো!

ধরে নিলাম যে আপনার বিদ্যমান অ্যাপ্লিকেশন ওয়েবপ্যাকারের সাথে চলছে, আপনি পরিবর্তন ছাড়াই "টেইলউইন্ড সিএসএস ইনস্টল করা" এ বর্ণিত ধাপগুলি অনুসরণ করতে পারেন! আপনার যদি ওয়েবপ্যাকার ইনস্টল না থাকে তবে এটিকে জেমফাইলে যোগ করুন, bundle install চালান এবং তারপর bundle exec rails webpacker:install , এবং তারপর Tailwind ইনস্টলেশনের ধাপগুলি অনুসরণ করুন৷

৷

তারপরে আপনি আপনার বিদ্যমান CSS এবং Tailwind CSS!

এর সাথে মিশ্রিত করতে এবং মেলাতে পারেন

শুভ স্টাইলিং!


  1. কিভাবে সিএসএস ব্যবহার করে আইকন দিয়ে একটি ফর্ম তৈরি করবেন?

  2. CSS-এ ফলব্যাক সহ WebP ছবি ব্যবহার করা

  3. রেলের সাথে হটওয়্যার ব্যবহার করা

  4. রেলের সাথে কৌণিক ব্যবহার 5