Використання Tailwind CSS для Стилізації
Tailwind CSS — це CSS-фреймворк, який надає набір низькорівневих утиліт-класів. Ці класи можна додавати безпосередньо до розмітки для створення дизайну без написання CSS-коду з нуля. Основна ідея Tailwind полягає в тому, що шляхом додавання відповідного набору класів можна застосувати необхідні стилі до елементів.
Наприклад:
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
Елемент кнопки матиме зелений фон із білим текстом. Також буде додано відступи та заокруглені кути.
Повернення до проєкту
Додайте ще один елемент до нашого застосунку з використанням стилів Tailwind. Скопіюйте елемент div, наведений нижче, та вставте його над елементом p у файлі app/page.tsx.
Після внесення змін збережіть їх і перевірте сторінку в реальному часі. Тепер ви повинні побачити білу круглу фігуру.
На практиці
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
What does the `h-10 w-10 rounded-full bg-white` class combination do?
Can you explain how to use Tailwind classes for other shapes or colors?
Where should I place the new `div` in the `app/page.tsx` file?
Awesome!
Completion rate improved to 2.08Використання Tailwind CSS для Стилізації
Свайпніть щоб показати меню
Tailwind CSS — це CSS-фреймворк, який надає набір низькорівневих утиліт-класів. Ці класи можна додавати безпосередньо до розмітки для створення дизайну без написання CSS-коду з нуля. Основна ідея Tailwind полягає в тому, що шляхом додавання відповідного набору класів можна застосувати необхідні стилі до елементів.
Наприклад:
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
Елемент кнопки матиме зелений фон із білим текстом. Також буде додано відступи та заокруглені кути.
Повернення до проєкту
Додайте ще один елемент до нашого застосунку з використанням стилів Tailwind. Скопіюйте елемент div, наведений нижче, та вставте його над елементом p у файлі app/page.tsx.
Після внесення змін збережіть їх і перевірте сторінку в реальному часі. Тепер ви повинні побачити білу круглу фігуру.
На практиці
Дякуємо за ваш відгук!
