Se você está familiarizado com Gatsby, provavelmente sabe como ele é rápido e como melhora o processo geral de desenvolvimento e o desempenho. De acordo com sua documentação oficial, Gatsby é “uma estrutura de código aberto baseada no React para a criação de sites e aplicativos. É ótimo se você está construindo um site de portfólio ou blog, ou uma loja de comércio eletrônico de alto tráfego ou página inicial de uma empresa. ”

Gatsby é realmente ótimo para construir muitas coisas. Isso nos ajuda a criar sites e aplicativos rápidos sem demora. Além disso, ele oferece uma variedade de ferramentas para ajudá-lo a começar , independentemente do que você está tentando construir, o mais rápido que possível. Você também pode construir e estilizar um aplicativo Gatsby do zero, como demonstraremos neste tutorial.

Para o estilo, usaremos CSS do Tailwind . O Tailwind é perfeito para quem adora escrever CSS, mas não quer necessariamente criar arquivos separados para seus estilos. Além disso, com Tailwind CSS, classes de utilitário são criadas para você. Tudo que você precisa fazer é usá-los em seu projeto.

Para mostrar como Gatsby e Tailwind CSS funcionam juntos, criaremos um blog simples de saúde e condicionamento físico. No decorrer deste tutorial, abordaremos o seguinte:

Configurando um projeto Gatsby Usando Gatsby com plug-ins Primeiros passos com Tailwind CSS Criação de conteúdo de blog Criação de componentes de layout Criação de um seção do cabeçalho Criação da seção do blog O componente da página sobre O componente da página de contato Criação de páginas Criação de páginas dinâmicas

O produto finalizado deve ser semelhante a:

A imagem s usados ​​nesta demonstração são todos da Unsplash; você pode acessá-los em meu repositório Github .

Ao final deste tutorial, você deve ser capaz de usar o CSS do Tailwind para definir o estilo de seus projetos Gatsby.

Configurando um projeto Gatsby

Em seu terminal, execute npm init gatsby. Isso gera um prompt com instruções que ajudam a configurar seu projeto Gatsby.

Siga as instruções escolhendo um nome e uma pasta para seu projeto. Quando for perguntado se você usará um CMS, escolha “Não ou irei adicioná-lo mais tarde”. Faça o mesmo quando questionado sobre o sistema de estilo. Quando for questionado sobre a instalação de recursos adicionais, escolha “Build and host for free on Gatsby Cloud”. Em seguida, escolha “Concluído”. Se tudo correr bem, um modelo Gatsby será gerado para você.

Conforme observado na introdução, usaremos o CSS do Tailwind para estilização, então vamos configurá-lo.

(Observação: usar Tailwind CSS requer que você tenha Node.js 12.113.0 ou superior instalado.)

Digite o seguinte:

npm install-D gatsby-plugin-postcss tailwindcss @ latest postcss @ mais recente autoprefixer @ mais recente.

Você notará que também instalamos gatsby-plugin-postcss. Isso ocorre porque Tailwind CSS é um plugin PostCSS e o plugin nos ajuda a fazer um trabalho pesado.

Quando terminar a instalação, crie um arquivo de configuração do Tailwind digitando npx tailwindcss init-p. Isso cria os arquivos tailwind.config e postcss.config na pasta do projeto. Os arquivos de configuração permitem que você crie configurações para seu estilo.

Vamos configurar o CSS do Tailwind para remover todos os estilos que não usamos na produção. Isso será feito no arquivo tailwind.config. Na matriz de eliminação, digite’./src/**/*.{js,jsx,ts,tsx}’. Seu arquivo de configuração CSS do Tailwind deve ter a seguinte aparência:

Em gatsby-.config.js, habilite PostCSS adicionando gatsby-plugin-postcss na matriz de plug-ins. O arquivo de configuração Gatsby agora deve ter a seguinte aparência:

Crie uma pasta de estilos em sua pasta src e crie um arquivo.css nela. Você pode nomeá-lo como quiser; Vou nomear meu global.css porque meus estilos globais serão escritos nele.

No arquivo CSS, adicionaremos a base do Tailwind, utilitários e estilos de componente usando a diretiva @tailwind.

Adicione o seguinte ao seu arquivo CSS:

Agora, para a parte final da configuração CSS do Tailwind, crie um arquivo gatsby-browser.js na raiz da pasta do projeto e importe o arquivo CSS usando import”./src/styles/global.css”.

Agora podemos começar a usar o CSS do Tailwind em nosso projeto!

Usando Gatsby com plug-ins

Gatsby oferece uma variedade de plug-ins para tornar o processo de desenvolvimento mais fácil. Usaremos os seguintes plug-ins em nosso projeto:

Gatsby-source-filesystem nos ajuda a ler arquivos de diferentes fontes. As fontes podem incluir vários diretórios em nossa pasta de projeto, WordPress, contentful e muitos mais gatsby-transformer-mark nos ajuda a trabalhar com arquivos Markdown gatsby-plugin-image e gatsby-plugin-sharp nos permitem trabalhar com imagens em Gatsby gatsby-transformer-sharp nos permite trabalhar com imagens dinâmicas

Para instalá-los, digite o seguinte:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp gatsby-transformer-observação

Seu gatsby-config.js deve ter a seguinte aparência:

Agora, vamos começar a construir.

Introdução ao Tailwind CSS

Em nossa pasta src, crie uma nova pasta chamada blog-posts. No arquivo de índice da pasta src, exclua todo o conteúdo existente e crie um novo componente React.

Execute gatsby Develop em seu terminal para ver as mudanças ativas enquanto trabalhamos. Agora você deve ser capaz de ver suas alterações em http://localhost: 8000/.

Vou usar o Fontes Montserrat e Rammetto do Google Fonts . Existem diferentes maneiras de usá-lo, mas vou importá-lo no início do meu arquivo global.css.

No seu arquivo tailwind.config, adicione fontFamily no objeto de tema. Isso permite nomear e usar várias fontes.

Esta é a aparência do meu arquivo de configuração CSS do Tailwind:

Se você nomear uma família de fontes Cabin , quando quiser aplicá-lo em seus estilos, você pode simplesmente escrever font-cabin e a fonte Cabin será aplicada ao seu texto.

Criando conteúdo de blog

Usaremos Markdown para criar o conteúdo da nossa página. No meu repositório Github , src/blog-posts contém algum conteúdo que podemos usar para esta demonstração.

O Os arquivos Markdown de postagem de blog têm a seguinte aparência:

O par chave/valor no topo é o frontmatter da página e contém informações adicionais sobre a página.

Quando terminarmos de criar os arquivos Markdown, é hora de criar alguns componentes.

Criando componentes de layout

Começaremos com o componente de layout, que usará para criar seções que serão repetidas nas páginas. Seções como a barra de navegação e rodapé estão contidas no layout. Podemos criar o layout da mesma maneira que criamos os componentes React e importá-lo para todas as páginas em que queremos que apareça.

Vamos criar um arquivo de layout.

O modelo gerado por Gatsby criou uma estrutura de pasta inicial para nós. Podemos modificá-lo de acordo com nosso gosto.

Na pasta src, crie uma pasta de componentes. Na pasta de componentes, crie um arquivo Layout.js.

No arquivo, crie um componente React denominado Layout. Vamos criar nosso nav e rodapé neste componente.

O layout aceita um adereço filho. Sem este suporte, as páginas onde o componente de layout é usado não funcionariam corretamente. Os adereços filhos agem como tudo o que estará contido no layout da página.

Esta é a aparência do meu Layout.js:

import React from’react’import {Link} from’gatsby’const Layout=({children})=> {const linkStyle=`Hover: opacity-70 text-sm sm: text-lg` const logoStyle=`text-white font-rammetto sm: text-base text-sm` return (

)} exportação padrão Layout

Você perceberá que importamos um componente Link na parte superior da página. Usamos o componente Link para ir de uma página Gatsby para outra. Este link não é usado para páginas externas; para isso, podemos simplesmente usar a tag âncora.

Também adicionamos alguns estilos à página usando as classes do utilitário CSS do Tailwind. As classes de utilitário podem ser aplicadas como estilos embutidos, bem como em forma de variável. Prefiro criar variáveis ​​quando um determinado estilo ou estilos serão usados ​​em mais de um lugar.

Nos estilos de navegação, adicionamos cores de fundo e de texto. O Tailwind CSS oferece algumas cores prontas para o uso. Você também pode personalizar as cores adicionando-as ao arquivo de configuração do Tailwind. Podemos adicioná-los da mesma forma que adicionamos as famílias de fontes.

Agora que nossa barra de navegação e rodapé foram criados, vamos passar para outras partes de nosso blog.

Construindo um cabeçalho seção

A seguir, criaremos a seção de cabeçalho. Na pasta de componentes, crie um arquivo Header.js. Crie um componente React e adicione o seguinte a ele:

import React from’react’const Header=()=> {return (

Bem-vindo à sala de saúde

Seu blog completo para informações sobre saúde e condicionamento físico

)} exportar cabeçalho padrão

Neste componente, temos um seção de cabeçalho que contém uma tag H1 e uma tag P. Também adicionamos algumas classes do Tailwind a ele. Você notará que usamos font-rammetto no estilo H1. Mencionamos isso antes, quando adicionamos as famílias de fontes ao nosso tailwind.config.js. font-semibold define a espessura da fonte para 600 e text-5xl torna o tamanho da fonte 3rem. Também demos a ele um padding-bottom de 1rem.

Isso é tudo para o componente de cabeçalho. Vamos trabalhar na seção de blog da página.

Construindo a seção de blog

Na pasta de componentes, crie uma subpasta e nomeie-a blog. Na pasta do blog, crie um arquivo index.js e um arquivo BlogItem.js. O componente BlogItem será um contêiner para a imagem e o título de cada postagem do blog. Vamos criá-lo:

import React from’react’import {Link} from”gatsby”import {GatsbyImage} from”gatsby-plugin-image”; const BlogItem=({alt, image, slug, title})=> {return (

)} exportar BlogItem padrão

Na parte superior de nosso arquivo, importamos o componente GatsbyImage de gatsby-plugin-image. Em vez de usar a tag img, usaremos esse componente como nosso wrapper de imagem.

O componente GatbsyImage é usado quando queremos trabalhar com imagens dinâmicas. Se quisermos usar imagens estáticas, o componente StaticImage é útil. O componente BlogItem aceita alguns adereços; veremos o porquê em breve.

No arquivo index.js que criamos em nossa pasta de blog, vamos adicionar as seguintes linhas de código:

import React from’react’import {graphql, useStaticQuery} from’gatsby’import BlogItem from”./BlogItem”const Blog=()=> {const articles=useStaticQuery (graphql` {allMarkdownRemark {nodes {frontmatter {title tag slug image {childImageSharp {gatsbyImageData (layout: FULL_WIDTH, placeholder): BLURRED)}}} html}}} `) const allArticles=articles.allMarkdownRemark.nodes.map ((item, index)=> ()) return (

)} exportar Blog padrão

No topo da página, nós importou GraphQL e useStaticQuery de Gatsby. Com Gatsby, acessamos nossos dados com GraphQL. useStaticQuery é usado quando estamos fazendo uma consulta em um arquivo que não é uma página de Gatsby.

No momento, estamos consultando dados de nossa pasta de componentes, portanto, precisamos usar useStaticQuery. Se estivéssemos fazendo essa consulta a partir da pasta de páginas, não haveria necessidade de useStaticQuery.

Anteriormente neste tutorial, adicionamos o plug-in gatsby-source-filesystem, que nos ajuda a obter dados de nossos arquivos locais. O plug-in de observação do transformador transforma nossos arquivos Markdown em nós MarkdownRemark que podemos consultar.

Em nosso arquivo, estamos fazendo uma consulta GraphQL a todos os arquivos Markdown que criamos e obtendo algumas informações deles. Também estamos mapeando todos os nós do Markdown e renderizando um componente BlogItem para cada um. Para explorar GraphQL para seu projeto, verifique http://localhost: 8000/___ graphql .

Também adicionamos alguns estilo para a seção de itens do blog. Fizemos a grade de exibição e definimos as colunas da seguinte maneira: três em telas grandes e duas em telas menores.

Todos os links em nosso menu de navegação levam a páginas inexistentes, então vamos criar componentes para eles agora.

O componente da página sobre

Na pasta de componentes, crie um arquivo AboutPage.js e adicione o seguinte

import React from’react’const AboutPage=()=> { return (

)} export default AboutPage

No estilo div, você verá a classe w-4/5 usada. Isso significa que o conteúdo do div deve ocupar apenas 80 por cento da página.

O componente da página de contato

Vamos criar um componente de contato. Na pasta de componentes, crie um arquivo ContactPage.js e todos os seguintes

importe React from’react’const ContactPage=()=> {return (

)} export default ContactPage

Criamos um componente simples com as informações de contato para o site. Você pode personalizar o seu adicionando um formulário ou personalizando conforme achar adequado.

Esses serão todos os componentes de que precisaremos. Vamos usar os componentes em nossas páginas.

Criação de páginas

O modelo inicial gerou alguns arquivos para nós na pasta de páginas. Temos os arquivos 404.js e index.js. Podemos adicionar e modificar as páginas o quanto quisermos.

Em nosso arquivo index.js, adicione o seguinte:

import React from”react”import Layout from”../components/Layout”import Header from”../components/Header”import Blog from”../components/blog”const Home=()=> {return (

) } export default Home

Importamos os componentes Layout, Header e Blog da pasta de componentes e os renderizamos em nossa página inicial.

Agora, quando verificamos localhost: 8000, devemos ver algo assim:

Vamos criar nossas outras páginas. Na pasta de páginas, crie um novo arquivo chamado about.js e adicione o seguinte:

import React from’react’import Layout from”../components/Layout”import AboutPage from”../components/AboutPage”const About=()=> {return ( )} export default About

Aqui, importamos nossos arquivos Layout.js e AboutPage.js da pasta de componentes. Se você clicar no link Sobre no painel de navegação, verá algo assim:

Para criar nossa página de contato, vamos criar um contato. js file na pasta pages e adicione o seguinte:

import React from’react’import Layout from”../components/Layout”import ContactPage from”../components/ContactPage”const Contact=()=> {return ( )} exportar contato padrão

Assim como fizemos na página sobre, importamos o layout e os componentes contactPage da pasta de componentes e os renderizamos na página. A página de contato deve ser semelhante a esta agora:

Isso é tudo para a pasta de páginas. Em nossa página inicial, se você clicar em qualquer outro item do blog, uma página 404 será exibida em nossa tela. Isso ocorre porque ainda não criamos páginas para eles. Precisaremos criar páginas dinâmicas que serão geradas quando qualquer um dos itens do blog for clicado.

Criando páginas dinâmicas

Para criar páginas dinâmicas no Gatsby, precisaremos crie um modelo para as páginas. O modelo é o que queremos que qualquer página gerada se pareça. Podemos criar quantos modelos quisermos.

Na pasta src, crie uma subpasta e nomeie-a como modelos. Na pasta de modelos, crie um arquivo chamado article.js. Em article.js, adicione o seguinte:

import React from”react”import {graphql} from”gatsby”import Layout de”../components/Layout”import {GatsbyImage} de”gatsby-plugin-image”const Article=({data})=> {const {html}=data.markdownRemark const {title, tag, image}=data.markdownRemark.frontmatter return (

{tag}

{title}

Publicado na {tag} categoria

)} exportar artigo padrão exportar consulta const query=graphql` arte da consulta icleQuery ($ slug: String) {markdownRemark (frontmatter: {slug: {eq: $ slug}}) {html frontmatter {title tag image {childImageSharp {gatsbyImageData (layout: FULL_WIDTH, placeholder: BLURRED)}}}}} `

Aqui, criamos uma página modelo para os artigos da página e fizemos uma consulta para obter os dados que serão exibidos na página. Observe que não usamos useStaticQuery aqui. Isso porque esta é uma página sendo gerada por Gatsby, então podemos fazer consultas GraphQL sem useStaticQuery.

Além do modelo, precisamos de um arquivo chamado gatsby-node.js na raiz da pasta do nosso projeto. Vamos criá-lo e adicionar o seguinte a ele:

const path=require (`path`) exports.createPages=async ({graphql, actions})=> {const {data}=await graphql (` query AllArticles { allMarkdownRemark {nodes {frontmatter {slug}}}} `) data.allMarkdownRemark.nodes.forEach (item=> {actions.createPage ({path: item.frontmatter.slug, component: path.resolve (` src/templates/article.js`), context: {slug: item.frontmatter.slug}})})}

Este arquivo é executado em tempo de construção em um ambiente de nó. Podemos fazer consultas para obter dados e usar os dados para gerar páginas em tempo de construção usando o arquivo de modelo criado.

Criamos uma função assíncrona porque faremos uma consulta para buscar os dados necessários para adicionar conteúdo significativo para o modelo.

Passamos dois argumentos para nossa função, GraphQL e ações. GraphQL nos permite buscar nossos dados desejados e as ações contêm alguns métodos, incluindo um para gerar páginas.

Em seguida, fazemos uma consulta para obter o slug de todos os arquivos Markdown. O slug, em nosso caso, está contido no frontmatter de nossos arquivos Markdown. É importante notar que aqui, GraphQL é uma função, então não apenas adicionamos crases depois dela. Em vez disso, usamos um colchete da maneira usual que é feita para funções.

Nós iteramos por todos os nossos arquivos Markdown e, para cada um deles, criamos uma página dinamicamente usando o método createPage em ações. Neste método, passamos um objeto que diz a Gatsby como criar a página. Para cada arquivo Markdown, ele informa a Gatsby o caminho a ser usado ao criar a página, o modelo para a página e os dados que serão usados ​​na criação da página.

Observe que o valor do caminho é o slug do frontmatter em nossos arquivos Markdown, que é o que será exibido na barra de endereço. O slug será a rota para as páginas geradas. Também definimos o caminho para o componente que será usado como modelo para os itens do blog.

Na parte do contexto, passamos o slug como a variável de que precisaremos ao criar a página. Você pode adicionar vários itens lá. A variável slug é usada ao fazer uma consulta em nossa página de modelo.

Se tudo correr como deveria, ao executar o gatsby Develop, você poderá ver cada postagem do blog ao clicar nos itens do blog na página inicial.

Agora devemos ver algo assim:

Conclusão

Chegamos ao final de este tutorial de CSS de Gatsby e Tailwind. Neste ponto, você deve ser capaz de configurar e usar Gatsby com Tailwind CSS para criar seus próprios projetos.

Você pode ver uma demonstração do blog finalizado aqui .