Projeto criado utilizando o framework Vite na semana Ignite Lab da Rocketseat.

Tecnologias utilizadas

• Apollo Client para requisições Graphql
• Graphql para consultas a API
• GraphCMS para consumo do conteúdo que será exibido no front-end utilizando Graphql

Bibliotecas utilizadas para desenvolvimento

• TailwindCSS para estilização CSS
• PostCSS é um ecossistema de plugins personalizados e ferramentas
• Autoprefixer para adicionar prefixos de regras CSS no navegador utilizado

Configurações do Tailwindcss

  yarn tailwindcss init -p

Este comando irá gerar um arquivo tailwind.config.js na raiz do projeto com o seguinte trecho de código:

1   /** @type {import('tailwindcss').Config} */
2   module.exports = {
3   content: [],
6   theme: {
7     extend: {},
8   },
9     plugins: [],
10  }
11

Adicione o trecho de código da linha 3 no arquivo de configuração.

1  /** @type {import('tailwindcss').Config} */
2   module.exports = {
3   content: ['./src/**/*.tsx'],
6     // restante do código...
7    }

Fazendo isto o tailwindcss passa a entender que você irá apenas estilizar os arquivos que estiverem neste diretório (linha 3) e desse tipo de arquivo (.tsx).

Recomendação de extensões para intellisense e highlighting

• PostCSS Language Support Syntax highlighting for modern and experimental CSS in VSCode
• Tailwind CSS IntelliSense Intelligent Tailwind CSS tooling for VS Code
• GraphQL extension for VSCode adds syntax highlighting, validation, and language features like go to definition, hover information and autocompletion for graphql projects. This extension also works with queries annotated with gql tags or comments.