Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Типографіка в Дії | Основні Концепції Та Базове Стилювання
Tailwind CSS для Веброзробки

bookЗавдання: Типографіка в Дії

Завдання

Використовуючи утиліти типографіки Tailwind CSS, створіть текстовий компонент із такими характеристиками:

  1. Заголовок (h1) з:
    • Розміром шрифту 4xl;
    • Жирним накресленням шрифту;
    • Звичайною висотою рядка.
  2. Підзаголовок (h2) з:
    • Розміром шрифту 2xl;
    • Напівжирним накресленням шрифту;
    • Зменшеною висотою рядка.
  3. Абзац (p) з:
    • Базовим розміром шрифту;
    • Звичайним накресленням шрифту;
    • Збільшеною висотою рядка.
index.html

index.html

copy
  1. Розмір шрифту: Використовуйте text-4xl, text-2xl, text-base для розмірів шрифту;
  2. Насиченість шрифту: Використовуйте font-bold, font-semibold, font-normal для насиченості шрифту;
  3. Міжрядковий інтервал: Використовуйте leading-normal, leading-tight, leading-relaxed для міжрядкових інтервалів.
index.html

index.html

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 8

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me the complete HTML code for the text component using these Tailwind classes?

Can you explain what each Tailwind class does in this context?

Can you provide an example of how this component would look on a webpage?

Awesome!

Completion rate improved to 3.57

bookЗавдання: Типографіка в Дії

Свайпніть щоб показати меню

Завдання

Використовуючи утиліти типографіки Tailwind CSS, створіть текстовий компонент із такими характеристиками:

  1. Заголовок (h1) з:
    • Розміром шрифту 4xl;
    • Жирним накресленням шрифту;
    • Звичайною висотою рядка.
  2. Підзаголовок (h2) з:
    • Розміром шрифту 2xl;
    • Напівжирним накресленням шрифту;
    • Зменшеною висотою рядка.
  3. Абзац (p) з:
    • Базовим розміром шрифту;
    • Звичайним накресленням шрифту;
    • Збільшеною висотою рядка.
index.html

index.html

copy
  1. Розмір шрифту: Використовуйте text-4xl, text-2xl, text-base для розмірів шрифту;
  2. Насиченість шрифту: Використовуйте font-bold, font-semibold, font-normal для насиченості шрифту;
  3. Міжрядковий інтервал: Використовуйте leading-normal, leading-tight, leading-relaxed для міжрядкових інтервалів.
index.html

index.html

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 8
some-alt