Подробное руководство по созданию простого плагина в проекте Next.js.
В этом сообщении блога мы обсудим важность и преимущества создания собственных подключаемых модулей CSS для Tailwind и продемонстрируем, как создать простой подключаемый модуль в проекте Next.js.
Введение
Tailwind CSS — это популярный CSS-фреймворк, предназначенный для упрощения стилизации современных приложений. Используя CSS-плагины Tailwind, вы можете расширить функциональность фреймворка и сделать свою кодовую базу более согласованной и удобной в сопровождении.
Зачем создавать собственные CSS-плагины Tailwind?
Есть несколько причин, по которым вы можете захотеть создать свои собственные плагины Tailwind CSS:
- Последовательность. Пользовательские подключаемые модули позволяют определить набор стилей, которые можно повторно использовать в приложении. Это гарантирует, что ваш дизайн останется согласованным, что упростит управление и обслуживание.
- Настройка. Плагины позволяют создавать собственные служебные классы, отвечающие конкретным потребностям вашего проекта. Это позволяет добавлять пользовательские функции в Tailwind CSS без необходимости писать повторяющиеся встроенные стили.
- Повторное использование. Создав подключаемый модуль, вы можете легко поделиться им с другими проектами или даже опубликовать для использования сообществом. Это способствует повторному использованию и помогает поддерживать единую систему проектирования в нескольких проектах.
- Эффективность. Написание пользовательских подключаемых модулей позволяет определять сложные стили и поведение с помощью простых служебных классов. Это может сделать ваш код более читабельным и понятным, повысив производительность и эффективность вашей команды.
Помня об этих преимуществах, давайте приступим к созданию пользовательского CSS-плагина Tailwind в проекте Next.js.
Шаг 1. Настройте проект Next.js
Во-первых, давайте создадим новый проект Next.js, используя следующую команду:
npx create-next-app customPlugin //change directory cd customPlugin
Шаг 2: Установите Tailwind CSS
Теперь давайте установим Tailwind CSS и его зависимости:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Создайте файл конфигурации для Tailwind CSS:
npx tailwindcss init -p
Эта команда создаст файлы tailwind.config.js и postcss.config.js в каталоге вашего проекта.
Шаг 3. Настройте CSS Tailwind
Откройте tailwind.config.js и добавьте конфигурацию плагина:
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('./plugins/loading-indicator')],
}
Шаг 4: Создайте плагин индикатора загрузки
Создайте новый каталог с именем plugins:
mkdir plugins //Create a new file called loading-indicator.js inside the plugins directory: touch plugins/loading-indicator.js
Откройте файл loading-indicator.js и добавьте следующий код:
const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addUtilities }) => {
const loadingUtilities = {
'.loading-indicator': {
display: 'inline-block',
border: '2px solid transparent',
borderTop: '2px solid currentColor',
borderRadius: '50%',
width: '24px',
height: '24px',
animation: 'spin 1s linear infinite',
},
}
addUtilities(loadingUtilities, ['responsive'])
})
Этот плагин создает служебный класс .loading-indicator, который стилизует счетчик загрузки. Я не добавлял слишком много стилей, его очень простой загрузчик, не стесняйтесь добавлять или делать его красивым, как вам нравится.
Шаг 5. Включите Tailwind CSS в свой проект
Откройте файл styles/globals.css и замените его содержимое следующим:
@tailwind base;
@tailwind components;
@tailwind utilities;
@keyframes spin {
to {
transform: rotate(360deg);
}
}
Обязательно импортируйте styles/globals.css в файл _app.js или _app.tsx:
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Шаг 6: Используйте плагин в компоненте
Создайте новый компонент с именем PageList.js:
import { useState, useEffect } from 'react'
const MOCK_DATA = [
{ id: 1, title: 'Page 1' },
{ id: 2, title: 'Page 2' },
{ id: 3, title: 'Page 3' },
]
const PageList = () => {
const [pages, setPages] = useState([])
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchPages()
}, [])
const fetchPages = async () => {
// mock api call to and to show spinner for two seconds
const data = await new Promise((resolve) => {
setTimeout(() => {
resolve(MOCK_DATA)
}, 2000)
})
setPages(data)
setLoading(false)
}
return (
<div>
{loading ? (
<div className="loading-indicator"></div>
) : (
<ul>
{pages.map((page) => (
<li key={page.id}>{page.title}</li>
))}
</ul>
)}
</div>
)
}
export default PageList
В этом компоненте мы получаем список страниц и отображаем их. Пока страницы извлекаются, мы показываем счетчик загрузки, используя служебный класс .loading-indicator из нашего плагина.
💡 Компонент
PageListс вашим пользовательским стилем очень полезен. Но что, если бы вы могли упаковать это в пакет, который можно было бы повторно использовать в проектах с помощью простогоnpm i @bit/your-username/PageList? Вы можете сделать это, используя цепочку инструментов с открытым исходным кодом, например Bit.
Узнайте больше здесь:
Шаг 7. Добавьте компонент PageList в свое приложение.
Наконец, давайте воспользуемся компонентом PageList в файле index.js:
import Head from 'next/head'
import PageList from '../components/PageList'
export default function Home() {
return (
<div>
<Head>
<title>My Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="text-2xl font-bold">List of Pages</h1>
<PageList />
</main>
</div>
)
}
Теперь запустите сервер разработки:
npm run dev
Откройте браузер и перейдите к http://localhost:3000. Вы должны увидеть индикатор загрузки во время загрузки списка страниц и список страниц после загрузки данных.
Вот и все! Вы успешно создали проект Next.js с помощью Tailwind CSS и внедрили простой плагин для загрузки стилей элементов.
Документация Tailwind CSS: официальная документация Tailwind CSS подробно описывает фреймворк и предоставляет массу информации о его функциях, использовании и параметрах настройки. Это отличная отправная точка, чтобы узнать больше о Tailwind CSS и его экосистеме:
Документация Next.js: официальная документация Next.js — отличный ресурс для изучения фреймворка и его функций. Он включает руководства, примеры и рекомендации по созданию приложений React с помощью Next.js:
Руководство по созданию плагинов Tailwind CSS: это руководство из официальной документации содержит обзор создания пользовательских плагинов в Tailwind CSS. Он охватывает основы создания плагинов, API плагинов и предлагает примеры:
Репозиторий Tailwind CSS на GitHub. Официальный репозиторий Tailwind CSS на GitHub содержит исходный код, примеры и множество плагинов и ресурсов, предоставленных сообществом:
Примеры Next.js: репозиторий Next.js GitHub содержит множество примеров проектов, демонстрирующих, как интегрировать различные технологии и библиотеки с Next.js, включая Tailwind CSS:
Плагины сообщества Tailwind CSS: список плагинов сообщества для Tailwind CSS. Изучение этих плагинов может дать вам представление о том, что возможно, и вдохновить вас на создание собственных плагинов:
Tailwind CSS Labs: официальная организация GitHub для экспериментальных проектов и идей, связанных с Tailwind CSS. Вы можете найти интересные проекты и плагины, которые со временем могут стать частью основного фреймворка:
Создавайте приложения React с повторно используемыми компонентами, как Lego
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
