Tailwind insatall By cli
  • npm init -y
  • npm install tailwindcss @tailwindcss/cli

  • একটি assets/css ফোল্ডার বানিয়ে তার ভিতর input.css ফাইল তৈরি করুন এবং তার ভিতরে @import "tailwindcss"; রাখুন এবং সেভ করুন।

  • npx @tailwindcss/cli -i ./assets/css/input.css -o ./assets/css/output.css --watch

  • index.html ফাইল বানিয়ে। তাতে output.css লিংক করাবো

  • Note: এখন আমরা input.css এর ভিতরে আমাদের কাস্টম সিএসএস কোড রাখবো।

  • যদি আমরা terminal অথবা vs -code ক্লোজ করি। তারপরে যদি আবার নতুন করে কাস্টম কোড লিখি তাহলে সেটি কাজ করবেন না।

  • নিম্নের কমান্ডটি আবার রান করলে কাজ করবে: npx @tailwindcss/cli -i ./assets/css/input.css -o ./assets/css/output.css --watch

    সহজ উপায়:
    node run dev
  • Video
Tools
Resource
Video
Units
  • Responsive: sm="640px", md="768px", lg="1024px", xl="1280px", 2xl="1536px"; Width: sm= 24rem (384px) md= 28rem (448px) lg= 32rem (512px) xl= 36rem (576px) 2xl= 40rem (640px) Height: sm= 24rem (384px) md= 28rem (448px) lg= 32rem (512px) xl= 36rem (576px) 2xl= 40rem (640px)
Important Class 
  • class="md:max-lg:bg-amber-500
    class="max-lg:bg-orange-500"
    class="max-md:bg-orange-500"
    class="max-md:bg-orange-500 max-w-lg max-w-screen-lg"
calculator
After & Before 
  • before:content-['']
    after:content-['']
     relative
 after:bg-[url('./images/bg.png')] 
 after:absolute 
 after:top-0 
 after:left-0 
 after:w-full 
 after:h-full
 after:bg-cover
 after:bg-center
 after:z-[-1]
Converter
Group
  • এটা কাজ করে প্যারেন্ট এবং চাইল্ডের সাথে। যখন প্যারেন্টের ওপর কোনো ইফেক্ট করা হয় তখন চাইল্ড এ ইফেক্ট করবে। যেমন Parent এ Hover করলাম চাইল্ডে একটু চেঞ্জ হলো। 
  • 
                    
    Bangladesh is a big 
    
                   
  •

  • অনেকগুলো গ্রুপ ইউজ করলে তখন মেন্টেন্স করতে সমস্যা হয় তাই গ্রুপের ভিন্ন ভিন্ন নাম দেওয়া যায় নিম্নের উপায় 

  •                     group/first, group-hover/first:bg-fuchsia-400
Peer
  • Group মতো কিন্তু এটা কাজ করে Sibling এর সাথে Sibling এর। 
  •
Group & Peer Variants
Cheet Sheet
build, preview
  • npm run build
    npm run preview