CSS জাদুকরী কিন্তু সময়সাপেক্ষ। সুন্দর, ফাংশনাল, এবং অ্যাক্সেসিবল সাইট ব্যবহার করা খুশি আনে, কিন্তু নিজেরা CSS লিখতে গেলে ক্লান্তি লাগে। বুটস্ট্র্যাপ (Bootstrap) এর মতো অনেক CSS লাইব্রেরি সম্প্রতি ব্যাপকভাবে ফেলে, এবং ২০২১ সালে টেইলউইন্ড (Tailwind) শীর্ষে আছে।
যদিও রেইলস টেইলউইন্ড আউট-অফ-দ-বক্স দেয় না, এই আর্টিকেলে আপনাকে দেখাব কিভাবে একটি নতুন রুবি অন রেইলস প্রজেক্টে টেইলউইন্ড 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-এ যে গड़বড তৈরি করে সেটার জন্য ঘৃণা করে।
নতুন রেইলস অ্যাপসহ টেইলউইন্ড সেটআপ
সহজতর করার জন্য, আমরা স্ক্র্যাচ থেকে অ্যাপ বিল্ড করব এবং একটি নতুন রেইলস অ্যাপ্লিকেশন তৈরি করব। উদাহরণের জন্য আমরা নিচের ভার্সনগুলো ব্যবহার করব:
- Rails 6.1
- Ruby 3.0.0
rbenv আলাদা রুবি ভার্সন ম্যানেজ করার খুব স্ট্যান্ডার্ড উপায়। আপনার হোমব্রিউ (homebrew) থাকলে, brew install rbenv দিয়ে ইনস্টল করতে পারেন।
rbenv ব্যবহার করলে, rbenv install 3.0.0 দিয়ে রুবি ৩.০.০ ইনস্টল করতে পারেন।
তারপর, বর্তমান ডিরেক্টরিকে রুবি ৩.০.০-এ সווিচ করুন rbenv local 3.0.0 দিয়ে।
নতুন রুবি ভার্সন হলে, gem install rails ব্যবহার করুন।
নতুন রেইলস অ্যাপ্লিকেশন তৈরি
এখন আপনি রেইলস ৬.১ এবং রুবি ৩.০ দিয়ে সেট, নতুন রেইলস অ্যাপ্লিকেশন তৈরি করতে রান করুন rails new tailwind-example। tailwind-example বদলে আপনার প্রজেক্টের যেকোনো নাম দিন, কিন্তু মনে রাখবেন অন্য কোড/শেল রেফারেন্সেও সেটা সোয়াপ করতে হবে।
পরবর্তী, নতুন প্রজেক্ট ডিরেক্টরিতে যান: cd tailwind-example।
শেষে, লোকালি সার্ভ করুন যেন সব ঠিকঠাক কাজ করছে কিনা চেক করতে: rails server। তারপর ব্রাউজারে localhost:3000 এ যান রেইলস ওয়েলকাম পেজ দেখতে! আপনি এমন কিছু দেখলে, আপনি সঠিক পথে আছেন: 
একটি ফ্রেশ রেইলস অ্যাপ চালু থাকলে, আপনি টেইলউইন্ড যোগ করে ইন্টারফেস দ্রুত তৈরি করতে পারেন।
টেইলউইন্ড CSS ইনস্টল করা
প্রথমে, টেইলউইন্ডCSS ডিপেন্ডেন্সি হিসেবে যোগ করুন yarn add tailwindcss রান করে।
পরবর্তী, টেইলউইন্ড কনফিগারেশন ফাইল সঠিক জায়গায় তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন: npx tailwindcss init।
এখন, আপনার প্রজেক্ট ওপেন করুন আপনার পছন্দের IDE-তে (VS Code এর জন্য যay!)। আপনার প্রজেক্টের রুট ডিরেক্টরিতে 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 }) ] } পরবর্তী, application.css নামে একটি ফাইল তৈরি করুন app/javascript-এ। CSS ফাইলের ভিতরে নিচের ইম্পোর্টগুলো যোগ করুন:
@import "tailwindcss/base"; @import "tailwindcss/utilities"; @import "tailwindcss/components"; পরবর্তী, import "../application.css"; যোগ করুন app/javascript/packs/application.js-এ ইম্পোর্ট লিস্টে। এটা টেইলউইন্ড ইম্পোর্টগুলো 웹প্যাকার (webpacker)-এ আনে। ফাইলটি এরকম দেখাবে:
// 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() টেইলউইন্ড পুরো অ্যাপ্লিকেশনে ব্যবহার করতে, আপনাকে এই ওয়েবপ্যাক রেফারেন্স ইম্পোর্ট করতে হবে। app/view/layouts/application.html.erb-এ।
টেইলউইন্ড PostCSS 8 চায়, কিন্তু রেইলস ৬ এখনো আপডেট হয়নি। তাদের ডকুমেন্টেশনের সাহায্যে, আমরা সহজে এটা ফিক্স করতে পারি টেইলউইন্ডের কম্প্যাটিবিলিটি বিল্ড ইনস্টল করে। নিচের কমান্ড রান করুন ফিক্স করার জন্য:
npm uninstall tailwindcss postcss autoprefixer npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 টেস্ট করা
আমাদের নতুন CSS লাইব্রেরি দেখানোর জন্য, আমরা একটি নতুন ভিউ, কন্ট্রোলার, এবং মডেল তৈরি করব। এটা রেইলস স্কাফোল্ডিং (scaffolding) দিয়ে সহজ: rails generate scaffold User email:string password:string।
পরবর্তী, ডেটাবেস মাইগ্রেশন রান করুন User টেবিল তৈরি করতে: rake db:migrate।
এখন আমাদের একটি ইউজার মডেল এবং বেসিক CRUD ক্যাপাবিলিটি আছে ভিউ এবং কন্ট্রোলার অ্যাকশনসহ। চলুন ইউজারদের ইনডেক্স পেজকে অ্যাপ্লিকেশনের রুট (root) বানাই। এটা করতে config/routes.rb-এ root 'users#index' যোগ করুন। আপনার routes ফাইল এখন এরকম দেখাবে:
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 এ গেলে আপনি এমন কিছু দেখবেন: 
এটা দুটি কারণ থেকেenin আকর্ষণীয় নয়:
- কোনো ইউজার নেই।
- এটা বদশूरत।
প্রথম সমস্যা সমাধান করা সহজ অ্যাপ্লিকেশনটি ব্যবহার করে। টেইলউইন্ড আমাদের দ্বিতীয় সমস্যাতে সাহায্য করবে। "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> এটা শুধু একটি div যেটার ভিতরে হেডার এবং প্যারাগ্রাফ আছে। প্রতিটিকে টেইলউইন্ড CSS দিয়ে একটু স্টাইল করা হয়েছে। আপনি বলতে পারেন, স্টাইল করার জন্য শুধু প্রতিটি এলিমেন্টে উপযুক্ত ক্লাস যোগ করতে হয়েছে। যদি কনফিগারেশন ঠিক থাকে, আপনার ইউজার পেজ এখন এরকম দেখাবে: 
PurgeCSS দিয়ে অ্যাসেট সাইজ কমানো
টেইলউইন্ড CSS অ্যাসেটগুলো আসলে বিশাল। আপনি কল্পনা করতে পারেন, সে সব ইউটিলিটি ক্লাসের ডেফিনিশন যোগ করলে কত বড় হয়। তাই শুধু যেসব ডেফিনিশন আপনি আসলে ব্যবহার করছেন সেগুলোই রাখা বুদ্ধিমানের কাজ। সৌভাগ্যে, টেইলউইন্ড CSS-এ বিল্ট-ইন purge ফিচার আছে যা ঠিক এটা করে! আপনাকে ম্যানুয়ালি বাছাই করতে হয় না কী থাকবে কী যাবে।
আপনাকে শুধু টেইলউইন্ড কনফিগারেশনে বলতে হবে কোথায় খুঁজবে, এবং সেটা অটোমেটিক্যালি যাবে এবং যেকোনো অপ্রयुक्त 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: [], } এই কনফিগারেশনтэй, অপ্রयुक्त CSS ক্লাসগুলো এক্সক্লুড হয়ে যাবে যখন আপনি NODE_ENV কে production সেট করে কম্পাইল করবেন।
টেইলউইন্ড CSS ক্লাস ব্যবহার করে সময় বাঁচানো
টেইলউইন্ড CSS-র মূল উদ্দেশ্য হলো আপনাকে আরও ভালো, কনসিস্টেন্ট, এবং দ্রুত ডিজাইন করতে সাহায্য করা। আপনার পেজ স্টাইল করা এখন ততটুকু সহজ যতটুকু সঠিক ক্লাস নাম যোগ করা। ডকুমেন্টেশন দ্রুত একবার দেখলে অরিয়েন্টেড হতে সাহায্য করে, কিন্তু চলুন আমাদের ইউজার ভিউগুলো বিল্ড আউট করি যাতে আপনাকে কিছু ধারণা হয় টেইলউইন্ড কতটুকু সহজ করে দেয় স্টাইলিং।
ইউজার ইনডেক্স পেজ স্টাইল করা
আমরা ইনডেক্স পেজের জন্য প্রথমে সব টেবিল জিনিসগুলো একটি div-এ রাখব, যাতে আমরা সমग्रে কিছু স্টাইল অ্যাপ্লাই করতে পারি। সেটাকে class="p-10" ক্লাস দিব, যেটা ১০px প্যাডিং। আমাদের h1 ট্যাগের জন্য ইউজারদের কিছু স্টাইলও অ্যাপ্লাই করব। নিচের ৩টি ক্লাস অধিকাংশ স্বয়ংস্ফূর্ত বোঝা যায়, কিন্তু মনে রাখবেন mb-4 মানে নিচে ৪px মার্জিন যোগ করা। এই পরিবর্তনগুলো után, User Index পেজ এরকম পড়াবে:
<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> এই পরিবর্তনগুলো অ্যাপ্লাই করার পর আমাদের ইউজার ইনডেক্স পেজ এরকম দেখাবে: 
নতুন ইউজার পেজ স্টাইল করা
যতক্ষণ আছি, চলুন এক্সিস্টিং "New User" পেজটিও রিস্টাইল করি। বর্তমানে এটা এরকম দেখাচ্ছে: 
প্রথমে, আমরা ইউজারদের new ভিউতে আমাদের পছন্দের ক্লাসগুলো অ্যাপ্লাই করব। আমার কোড এরকম:
<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 %> এটা অনেক এডিট এবং কিছু ক্লাস যা আমরা আলাপ করিনি, কিন্তু আপনার যা যা লাগবে সেটা ডকুমেন্টেশনে আছে। এই ক্লাসগুলো অ্যাপ্লাই করার পর আমাদের New User পেজ এখন এরকম দেখাবে!
এক্সিস্টিং অ্যাপে টেইলউইন্ড যোগ করা
সম্ভাবনা বেশি যে আপনি যদি টেইলউইন্ড ব্যবহার করতে চান, তবে আপনি একটি ব্ল্যাঙ্ক স্লেট থেকে শুরু করছেন না। আপনার প্রয়োজনীয় একটি এক্সিস্টিং প্রজেক্ট আছে অনেক কাস্টম CSS এবং এমনকি অন্যান্য ফ্রেমওয়ার্কের সাথে, যেমন বুটস্ট্র্যাপ। এটা সম্পূর্ণ ঠিক!
আপনার এক্সিস্টিং অ্যাপ্লিকেশন যদি Webpacker-এ চলে, তবে "Installing Tailwind CSS"-এ আউটলাইন করা ধাপগুলো পরিবর্তন ছাড়া ফলো করতে পারেন! আপনার যদি webpacker ইনস্টল্ড না থাকে, তবে জেমফাইলে যোগ করুন, bundle install রান করুন এবং তারপর bundle exec rails webpacker:install, এবং তারপর টেইলউইন্ড ইনস্টলেশন ধাপগুলো ফলো করুন।
তারপর আপনি আপনার এক্সিস্টিং CSS এবং টেইলউইন্ড CSS মিক্স অ্যান্ড ম্যাচ করতে পারেন!
শুভ স্টাইলিং!
