찾다

집  >  기사  >  웹 프론트엔드  >  초보자를 위한 벵골어 Tailwind CSS

초보자를 위한 벵골어 Tailwind CSS

WBOY
WBOY원래의
2024-08-11 06:35:02569검색

웹 디자인 분야에 있거나 CSS 프레임워크 진입을 고려하고 있는 우리에게는 부트스트랩이 CSS 프레임워크의 출발점이 될 수 있습니다. 초보자가 시작하기가 매우 쉽고 우리 업계에서 수요가 높기 때문입니다. 국가. 하지만 몇 년 동안 우리가 많이 들어본 CSS 프레임워크 중 하나는 Tailwind CSS입니다. 그리고 다양한 JavaScript 라이브러리, React, Vue 등과 같은 프레임워크를 사용하거나 사용을 시작한 사람들에게는 Tailwind CSS라는 이름이 매우 익숙합니다. 오늘날에도 Tailwind CSS는 가장 인기 있는 CSS 프레임워크입니다. 오늘은 Tailwind CSS에 대해 초보자도 아주 쉽게 Tailwind CSS를 시작할 수 있도록 아주 간단하게 작성해보겠습니다.

간단히 말해서 Tailwind CSS는 다음과 같습니다.

Tailwind CSS는 유틸리티 우선 CSS 프레임워크라고 합니다. 여기에서는 유틸리티 CSS 클래스를 HTML 파일에 직접 작성하여 모든 유형의 디자인을 만들 수 있습니다. Tailwind CSS를 사용하면 HTML 파일 외부에서 많은 작업을 수행할 필요가 없습니다. 매우 빠르고 유연하며 안정적입니다. Tailwind CSS는 기본적으로 여러 유틸리티 CSS 클래스로 구성되어 있기 때문에 개발 시 CSS 파일 크기가 크더라도 프로덕션용으로 빌드할 때는 HTML 파일에 사용된 CSS 클래스에 대한 스타일만 생성하므로 매우 유용한 기능을 제공합니다. 작은 CSS 파일. 중복되거나 중복되는 CSS가 없습니다.

Tailwind CSS 작동 방식:

Tailwind CSS는 기본적으로 모든 HTML 파일, JavaScript 구성 요소 또는 모든 유형의 템플릿 파일에서 CSS 클래스 이름을 스캔한 다음 스캔한 CSS에 대한 스타일을 생성하고 HTML 파일의 헤드 섹션인 정적 CSS 파일을 제공합니다. .

Tailwind CSS 설치 단계:

여러 가지 방법으로 프로젝트에 Tailwind CSS를 설치할 수 있습니다. 예: Tailwind는 CLI, PostCSS, CDN을 사용합니다. CDN이 사용하기 쉽다고 생각할 수도 있지만 여기서 가장 큰 문제는 Tailwind 구성 및 사용자 정의 기능이 없다는 것입니다. 여기에서는 Tailwind CLI를 사용하여 프로젝트에 Tailwind CSS를 설치하는 방법을 보여드리겠습니다

1단계:
먼저 프로젝트에서 노드를 초기화해야 합니다(컴퓨터에 Node.js 버전 12.13.0 이상이 설치되어 있어야 함). 프로젝트 폴더를 생성하고 프로젝트 폴더에서 터미널을 열고 아래 명령을 입력한 후 Enter 버튼을 누릅니다.

npm init -y

2단계:
이제 Tailwind CSS를 개발 종속 항목으로 설치해야 합니다. 이를 위해 터미널에 다음 명령을 입력하고 Enter 버튼을 누르세요.

npm install -D tailwindcss

3단계:
이제 tailwind CSS의 모든 구성을 포함하는 tailwind.config.js 파일을 만듭니다. 이를 위해 터미널에 다음 명령을 입력하고 Enter 버튼을 누르세요.

npx tailwindcss init

4단계:
tailwind.config.js 파일의 콘텐츠 배열에 Tailwind CSS 유틸리티가 스캔할 모든 템플릿 확장을 작성합니다. 이는 파일에서 tailwind CSS를 지원하고 싶다는 의미입니다. 예를 들어 여기서는 tailwind CSS를 html 파일에만 작성하므로 여기서는 콘텐츠 배열에 .html을 작성합니다.

//tailwind.config.js file
module.exports = {
content: ["*.{html}"],
theme: {
extend: {},
},
plugins: [],
}

5단계:
이제 2개의 폴더를 만듭니다. 폴더 이름을 각각 src와 dist로 지정했습니다. src 폴더에 input.css(어떤 이름이든 가능)라는 CSS 파일을 생성하고 dist 폴더에 output.css(어떤 이름이든 가능)라는 CSS 파일을 생성합니다. input.css 파일은 기본적으로 Tailwind CSS의 모든 지시어가 포함된 Tailwind 자체에서 사용됩니다. 이러한 지시문을 통해 Tailwind CSS의 기본, 구성요소 및 유틸리티 CSS가 호출됩니다. input.css 파일에 다음 코드를 작성해야 합니다.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ধাপ-৬ঃ
এখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য package.json ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে।

"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css -w"
}

এখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে tailwind.config.js বা input.css ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।

ধাপ-৭ঃ
এখন output.css ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে।

<link rel="stylesheet" href="dist/output.css">

ধাপ-৮ঃ
আমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ

npm run build

ধাপ-৯ঃ
এই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য Tailwind CSS IntelliSense এক্সটেনশন।
একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

유틸리티 우선 기본 사항:

앞서 언급했듯이 Tailwind CSS는 많은 유틸리티 CSS 클래스로 구성된 CSS 프레임워크입니다. 유틸리티 기능 연결은 본질적으로 Tailwind CSS를 다른 모든 CSS 프레임워크와 차별화합니다. Bootstrap CSS 프레임워크는 완전한 구성요소를 제공하는 반면 Tailwind CSS 프레임워크는 그러한 완전한 구성요소를 제공하지 않습니다. Bootstrap 구성 요소에는 여백, 패딩, 너비, 높이, 글꼴 크기, 색상이 이미 지정되어 있으므로 해당 구성 요소의 HTML 마크업을 HTML 파일에 넣고 아름다운 카드 구성 요소를 얻습니다. 반면 Tailwind CSS는 여백, 패딩과 같은 하위 수준 CSS로 구성된 수많은 유틸리티 클래스를 제공하여 원하는 대로 디자인하는 데 사용할 수 있습니다.

바닐라 CSS를 사용하여 디자인을 만들고 싶다면 두 가지 작업을 수행해야 합니다. 즉, 의미 있는 클래스 이름을 많이 작성하고 해당 이름을 유지하여 CSS를 한 줄씩 CSS 파일로 작성하는 것입니다. 이 경우 클래스의 의미있는 이름을 찾는 데 시간이 낭비되고 CSS를 직접 작성해야 하며 때로는 코드 중복 문제도 발생합니다.

반면에 유틸리티 CSS를 사용하면 더 이상 클래스 이름을 생각할 필요가 없으며 Tailwind의 유틸리티 클래스를 호출하기만 하면 됩니다. 많은 유틸리티 클래스를 어떻게 기억해야 할지 생각할 수 있습니다. 아무것도 기억할 필요가 없습니다. Tailwind의 거의 모든 유틸리티 클래스는 선언적이며 Tailwind의 자체 인텔리전스 지원이 코드 편집기에 있는 경우 이에 대해 걱정할 필요가 없습니다. 며칠 동안 규칙적으로 연습하면 모든 것이 통제 가능해집니다. 알아야 할 또 다른 중요한 점은 Tailwind CSS가 모두 rem 단위로 계산된다는 것입니다. 즉, p-6은 padding-1.5rem을 의미합니다. 예를 살펴보겠습니다.
একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
        <div class="shrink-0">
                <img class="h-12 w-12" src="https://aiarnob.com/frontend/assets/images/favicons/apple-touch-icon.png" alt="ChitChat Logo">
        </div>
        <div>
                <div class="text-xl font-medium text-black">AI Arnob</div>
                <p class="text-slate-500">You have a new message!</p>
    </div>
</div>

উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ

  • p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem।
  • max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।
  • mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।
  • bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।
  • rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।
  • shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।
  • flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।

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

বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)

এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।
একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

<button class="bg-sky-600 hover:bg-sky-700 text-white px-7 py-2 rounded-full">
        Click me
</button>

এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে bg-sky-600 এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে hover:bg-sky-700। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

রেস্পন্সিভ ডিজাইনঃ

টেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে min-width উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ
|ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|
|-|-|-|
|sm|640px|@media (min-width: 640px) { ... }|
|md| 768px |@media (min-width: 768px) { ... }|
|lg| 1024px |@media (min-width: 1024px) { ... }|
|xl| 1280px |@media (min-width: 1280px) { ... }|
|2xl| 1536px |@media (min-width: 1536px) { ... }|

সরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ sm: লেখা হবে তখন সেটি ডিভাইস উইড্থ 768px এর সমান বা এর চেয়ে বড় হলে কাজ করবে।

<img class="w-16 md:w-32 lg:w-48" src="...">

এখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

ডার্ক এবং লাইট মোডঃ

টেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস dark নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে।

<button class="bg-sky-600 hover:bg-sky-700 dark:bg-sky-200">
  Save changes
</button>

উপরের কোডে dark:bg-sky-200 লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে bg-sky-200।

ডার্ক মোড স্ট্রাটেজি
ডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় class স্ট্রাটেজি এবং media স্ট্রাটেজি। tailwind.config.js ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে।

//tailwind.config.js file
module.exports = {
  darkMode: 'class',
  // ...
}

আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে class স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে media স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

পুনরায় ব্যবহারযোগ্য স্টাইলঃ

আমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।
একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg">
        <div class="flex items-center space-x-2 text-base">
                <h4 class="font-semibold text-slate-900">Users</h4>
            <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">100</span>
        </div>
        <div class="mt-3 flex -space-x-2 overflow-hidden">
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1550525811-e5869dd03032" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263" alt=""/>
        </div>
        <div class="mt-3 text-sm font-medium">
                <a href="#" class="text-blue-500">+ 95 others</a>
        </div>
</div>

ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। input.css ফাইলে @apply ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি।

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .user-avatar {
    @apply inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover;
  }
}

এখন আমরা শুধু user-avatar ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় @layer ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।

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

위 내용은 초보자를 위한 벵골어 Tailwind CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json css html npm postcss Array auto class JS margin padding flex input visual studio visual studio code
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：주사위 굴리기 시뮬레이터 웹사이트 구축다음 기사：주사위 굴리기 시뮬레이터 웹사이트 구축

관련 기사

더보기