gatsby emotion tailwind starter

Gatsby Emotion Tailwind Starter

** Observe que este modelo não é mais mantido **

Um modelo de partida para criar um site estático rápido e rápido. Vem pré-construído com Gatsby, Emotion e Tailwind para colocá-lo em funcionamento rapidamente. Inspirado no blog Gatsby-Starter

Demo hospedado no Netlify.

Características

• React gerador estático gatsbyjs v2
• Emoção da biblioteca CSS-in-JS para seus componentes estilizados
• CSS CSS CSS Tailwind CSS para adicionar rapidamente estilo
• Suporte offline
• Aplicativo da Web progressiva
• Imagens de carregamento preguiçoso com suporte a Webp
• Map sitemon gerado automaticamente
• Variante CSS do Tailwind de modo escuro

Começando

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

Comece a desenvolver

Navegue no diretório de modelos

 # 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

Usando Emoção e Tailwind

Com a biblioteca do utilitário CSS, você pode adicionar rapidamente estilos e design responsivo, tudo sem precisar escrever nenhum CSS. A emoção permite que você nomeie e estilize elementos em seus arquivos 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 >
 </ >
) ;

Os documentos do Tailwind são um ótimo recurso para você começar. O iniciante usa Twin.Macro, que é uma biblioteca fantástica e inclui muitas variantes adicionais.

Personalização

• Config do Tailwind. Abra o arquivo tailwind.config.js para definir suas próprias preferências e requisitos do projeto, como pontos de interrupção, cores e fontes.

• Um componente de layout ( src/components/Layout.js ) é usado para definir um layout padrão padronizado para envolver páginas.

• Modo escuro e claro. Abra src/components/styled/baseStyles.js e tailwind.config.js para ver onde/como as variáveis ​​personalizadas CSS são adicionadas. Você também pode usar a variante escura do Tailwinds dentro de componentes com estilo, como mostrado em src/components/home/styled/card.js com uma variante escura e src/components/styled/socialList.js para uma variante de luz.

• Este modelo usa os tipos de letra do plug -in para otimizar a entrega da fonte. Alterar a fonte (s) simplesmente requer a instalação do seu tipo de letra favorito e a importação para gatsby-browser.js . Lembre -se de adicionar suas fontes ao (s) tailwind.config.js , as fontes sans/serif matriz, a fim de usá -lo com utilitários do Tailwind.

• O componente SEO, retirado de Gatsby-Starter-Blog, permitindo que você adicione suas descrições e títulos de SEO.

• Favicon. Gerado automaticamente do Gatsby-Plugin-manifest em gatsby-config.js . Substitua o Favicon atual ( src/images/icon/logo.png ) pelo seu próprio ícone 512x512