gatsby emotion tailwind starter

Gatsby Emotion Tail Whare Starter

** Обратите внимание, что этот шаблон больше не поддерживается **

Шаблон стартера для создания светового статического веб-сайта. Поставляется предварительно построенным с Gatsby, Emotion и Taillide, чтобы быстро запустить вас. Вдохновлен Гэтсби-Стартер Блог

Демонстрация размещена в NetLify.

Функции

• React Static Generator Gatsbyjs v2
• Библиотека CSS-in-JS эмоции для ваших стилизованных компонентов
• CSS Utility Framework Taillid CSS, чтобы быстро добавить стиль
• Офлайн -поддержка
• Прогрессивное веб -приложение
• Ленивая загрузка изображений с поддержкой WebP
• Автогенерированная карта сайта
• Вариант CSS Dark Mode

Начиная

 # download the template zip via dropdown or
git clone https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter.git

Начать развиваться

Перейдите в каталог шаблонов

 # install dependencies
npm install
# yarn
yarn

# development with hot re-load
npm run dev
# yarn
yarn dev

# build for production
npm run build
# yarn
yarn build

Использование Emotion & Tailwind

Благодаря ветру CSS Utility Library вы можете быстро добавить стили и отзывчивый дизайн, без необходимости писать CSS. Эмоции позволяют вам назвать элементы и стиля в ваших файлах JS.

 /*
  import tw, { styled } from 'twin.macro';

  ** Creating a styled div, centering children via flex-box **
*/

const StyledDiv = styled . div `
  ${ tw `flex justify-center items-center` }
`

/*
  ** Or with grid **
*/
const AltStyledDiv = tw . div `grid place-content-center place-items-center`

return (
 < >
    < StyledDiv >
      < p > I'm centred </ p >
      < p > Me too! </ p >
    </ StyledDiv >
    < AltStyledDiv >
      < p > Same here </ p >
    </ AltStyledDiv >
 </ >
) ;

Документы с ветром - отличный ресурс, который вы можете начать. Стартер использует Twin.Macro, которая является фантастической библиотекой, и включает в себя множество дополнительных вариантов.

Настройка

• Конфигурация с ветром. Откройте файл tailwind.config.js , чтобы установить свои собственные предпочтения и требования проекта, такие как точки разрыва, цвета и шрифты.

• Компонент макета ( src/components/Layout.js ) используется для установки стандартизированной макета по умолчанию для обмороки.

• Темный и легкий режим. Откройте src/components/styled/baseStyles.js и tailwind.config.js чтобы увидеть, где/как добавляются пользовательские переменные CSS. Вы также можете использовать темный вариант Tailwinds в стилизованных компонентах, как показано в src/components/home/styled/card.js с темным вариантом, а также src/components/styled/socialList.js для легкого варианта.

• Этот шаблон использует шрифты плагина для оптимизации доставки шрифтов. Изменение шрифта (ы) просто требует установки вашего любимого шрифта и импорта в gatsby-browser.js . Не забудьте добавить свой шрифт (ы) в tailwind.config.js , либо шрифты, без шрифтов/массив засечка, чтобы использовать его с утилитами.

• Компонент SEO, взятый из Gatsby-Starter-Blog, позволяя добавить ваши описания и названия SEO.

• Фавикон. Автопогенерирован из Гэтсби-Плагин-Манэнифеста, установленного в gatsby-config.js . Замените текущий FAVICON ( src/images/icon/logo.png ) на свой собственный значок 512x512