Публикации по теме 'tailwind'
HeadlessUI — Список, часть 5 — Переход
Часть 4: Переход
В этой части мы собираемся добавить переход в список.
Сначала нам нужно добавить переход от реакции безголового пользовательского интерфейса.
import { Listbox ,Transition } from '@headlessui/react'
Затем мы используем компонент ‹Transition›, чтобы обернуть ‹Listbox.Options›
Копируем компонент «Переход» из документации и вносим корректировку в масштаб
enterFrom="transform scale-125 opacity-0"
export default function MyListbox() {
const [open, setOpen] =..
Создайте адаптивную мобильную навигацию с помощью NextJS и TailwindCSS
NextJS
Next.js — это среда разработки с открытым исходным кодом, построенная на основе React.js. Это фреймворк на основе React, который имеет различные функции для включения рендеринга на стороне сервера и создания статических веб-сайтов на стороне клиента.
Next.js дает вам лучший опыт разработки со всеми функциями, которые он предоставляет для любых готовых приложений. Такие функции, как гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание,..
Создание клона веб-сайта Ajio.
Здравствуйте, возможно, вы видели веб-сайт Ajio, где вы можете купить любые популярные бренды одежды, обуви и других аксессуаров, сидя в одном месте.
Двигаясь вперед, мы команда из 6 человек в школе Масаи. В рамках нашей учебной программы мы разработали клон веб-сайта ajio.com всего за 4 дня. Этот блог посвящен нашему путешествию и проблемам, с которыми мы столкнулись при создании проекта.
Какова была моя постановка проблемы и как я к ней подошел: -
Итак, у меня была постановка..
EasyTailwind: пакет для увеличения мощности вашего Tailwind
Привет, люди!
Мы все любим Tailwind, но есть одна вещь, которая, я уверен, не всем нравится:
Классы быстро разрастаются! Там грязно и трудно понять, что там происходит… Я имею в виду:
"text-lg font-medium text-black hover:underline hover:decoration-black sm:text-base sm:text-blue-500 sm:hover:decoration-cyan-500 lg:text-2xl lg:text-green-500 lg:hover:decoration-amber-500"
Больше не надо! Введите EasyTailwind:
https://www.npmjs.com/package/easy-tailwind
Это небольшая..