Публикации по теме 'tailwind-css'
Как реализовать темные/светлые темы в приложении Next.js с помощью Context Hook и TailwindCSS
Инициализируйте приложение Next.js, а затем реализуйте для него переключение темной/светлой темы с помощью контекстного хука и TailwindCSS.
Одной из наиболее востребованных пользователями функций любого веб-приложения является переключение между светлым и темным режимами. В этой статье мы создадим шаблон приложения Next.js и с помощью TailwindCSS реализуем механизм переключения между темной и светлой темами. Я использовал хуки React для этого шаблона, такие как useContext, useState и..
Пример получения данных Next.js 13 с помощью OpenAI. Проект извлечения ключевых слов.
Новый каталог приложений , выпущенный в Next.js 13, является (по-прежнему) экспериментальным новым способом создания приложения Next.js. Он сосуществует с каталогом pages , и мы можем использовать его для переноса существующего проекта в новую структуру каталогов.
Эта новая структура каталогов — это не просто новый способ написания приложений, это совершенно новая система маршрутизации, более мощная, чем текущая.
См. пример приложения Next.js 13 с новым каталогом app :
-..
Советы профессионалов по улучшению проектов TailwindCSS
Чистые служебные классы для сложных проектов
Недавно TailwindCSS выпустила версию 3.0, и фреймворк остается очень популярным. Знаете ли вы все маленькие хитрости для более чистого кода?
Соотношения сторон
Чистый пользовательский интерфейс требует, чтобы все карты и изображения были идеального размера на всех устройствах. Слишком много размеров экрана, чтобы использовать адаптивные единицы масштабирования, такие как em , rem , % или vh/vw , что приводит к искажению мультимедиа..
Как создать анимацию слайдов при прокрутке в приложении React
Сегодня я довольно долго искал, пытаясь понять, что простые темы для создания веб-сайтов делают практически с каждым веб-сайтом. Я хотел добавить немного динамического движения на свою веб-страницу и изначально думал, что переходов CSS будет достаточно для этого. Обычно они есть... но не когда мы прокручиваем.
Сегодня мы создадим хук React, который использует IntersectionObserver API в Javascript для создания div, который появляется слева (как на картинке ниже). После того, как вы..
Создание Whinst. Часть 8. Создание внешнего интерфейса (резюме)
Создание Whinst. Часть 8. Создание внешнего интерфейса (резюме)
Примерно через полторы недели я рад сообщить, что закончил работу с интерфейсом Whinst. На данный момент я добавил достаточно структуры и функциональности во внешний интерфейс, чтобы перейти к созданию серверной части. Поскольку Whinst — это простое веб-приложение, все его страницы состоят из одних и тех же компонентов. В этой статье я расскажу вам, как я создавал интерфейс Whinst🚣🏾.
Как я создавал интерфейс Whinst🔨..
Давайте создадим приложение для отслеживания транспортных расходов с помощью веб-сервера SQLite и CSS Tailwind.
См. Демонстрация Netlify, размещенная на PocketHost
Приложение для отслеживания расходов на транспортные средства обычно отслеживает расходы на ваши транспортные средства. Это могут быть такие расходы, как замена масла, ремонт, шины, плата за проезд, топливо и т. д. Он также может отслеживать показания счетчиков для ваших транспортных средств.
Транспортное средство имеет марку, модель и тип. Он имеет определенное количество мест. Маркой может быть, например, Toyota, Honda или..
