i18n(pt-BR): Add Tailwind Integration Guide (withastro#4999)

* start: tailwind guide * doing: add more localization * finish: translation * fix: meta * fix: link * fix: links * Add PT-BR subtitles * Apply suggestions from code review Co-authored-by: Yan Thomas <[email protected]> * Fix heading --------- Co-authored-by: Yan Thomas <[email protected]>
mb21 · Oct 28, 2023 · c47ce26 · c47ce26
1 parent 9b423ce
commit c47ce26
Show file tree

Hide file tree

Showing 2 changed files with 268 additions and 0 deletions.
diff --git a/public/captions/pt-br/197398760-8fd30eff-4d13-449d-a598-00a6a1ac4644.vtt b/public/captions/pt-br/197398760-8fd30eff-4d13-449d-a598-00a6a1ac4644.vtt
@@ -0,0 +1,37 @@
+WEBVTT
+
+00:00.570 --> 00:06.520
+Olá pessoal, eu sou o Dan, e hoje irei te mostrar como utilizar Tailwind CSS com seu projeto Astro.
+
+00:06.815 --> 00:12.415
+Você pode ver que tenho um site Astro básico aqui e ele parece bem entediante, então eu quero adicionar alguns estilos a ele.
+
+00:12.500 --> 00:15.500
+Vou clicar nesse botão para abrir um novo terminal
+
+00:15.511 --> 00:19.871
+onde eu posso executar o comando “npx astro add tailwind”.
+
+00:20.107 --> 00:25.500
+Este comando pode ser encontrado na documentação de integrações que vou me certificar de adicionar um link para.
+
+00:26.327 --> 00:34.383
+Ele me pede para permití-lo modificar o arquivo de configuração para dar suporte para Tailwind, eu vou em frente apertar "yes" para isso
+
+00:34.563 --> 00:38.673
+e agora ele quer instalar o próprio Tailwind e eu definitivamente vou apertar "yes" para isso.
+
+00:39.017 --> 00:44.760
+Assim que isso estiver feito, ele quer generar um arquivo de configuração do Tailwind automaticamente, então apertarei "yes"
+
+00:45.076 --> 00:49.365
+e agora tudo o que preciso fazer é reiniciar o servidor de desenvolvimento
+
+00:49.447 --> 00:55.857
+e podemos ver que eu já tenho alguns bons estilos escritos com Tailwind em um dos meus componentes.
+
+00:56.069 --> 01:02.075
+Me deixe só colocar o cabeçalho em negrito, usando Tailwind.
+
+01:02.236 --> 01:04.927
+E é isso aí: Tailwind no Astro!
diff --git a/src/content/docs/pt-br/guides/integrations-guide/tailwind.mdx b/src/content/docs/pt-br/guides/integrations-guide/tailwind.mdx
@@ -0,0 +1,231 @@
+---
+type: integration
+title: '@astrojs/tailwind'
+description: Aprenda como usar a integração @astrojs/tailwind em seu projeto Astro.
+githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/'
+hasREADME: true
+category: other
+i18nReady: true
+---
+
+import Video from '~/components/Video.astro';
+
+Esta **[integração Astro][astro-integration]** traz as classes CSS utilitárias do [Tailwind](https://tailwindcss.com/) para todos os arquivos `.astro` e [componentes de framework](/pt-br/core-concepts/framework-components/) em seu projeto, juntamente com suporte para o arquivo de configuração do Tailwind.
+
+## Por que Tailwind?
+
+O Tailwind permite que você use classes de utilitário em vez de escrever CSS. Essas classes de utilitário são na maioria das vezes equivalentes a uma determinada configuração de propriedade CSS: por exemplo, adicionar `text-lg` a um elemento é equivalente a definir `font-size: 1.125rem` em CSS. Você pode achar mais fácil escrever e manter seus estilos usando essas classes de utilitário predefinidas!
+
+Se você não gostar dessas configurações predefinidas, pode [personalizar o arquivo de configuração do Tailwind](https://tailwindcss.com/docs/configuration) de acordo com os requisitos de design do seu projeto. Por exemplo, se o "texto maior" em seu design for na verdade `2rem`, você pode [alterar a propriedade `fontSize` de `lg`](https://tailwindcss.com/docs/font-size#customizing-your-theme) para `2rem`.
+
+O Tailwind também é uma ótima escolha para adicionar estilos a componentes React, Preact ou Solid, que não suportam uma tag `<style>` no arquivo do componente.
+
+Nota: geralmente não é recomendado usar tanto o Tailwind quanto outro método de estilização (por exemplo, Styled Components) no mesmo arquivo.
+
+
+## Instalação (Vídeo legendado)
+
+<Video src="https://user-images.githubusercontent.com/4033662/197398760-8fd30eff-4d13-449d-a598-00a6a1ac4644.mp4" type="video/mp4" />
+
+### Instalação Rápida
+
+O comando `astro add` automatiza a instalação para você. Execute um dos seguintes comandos em uma nova janela do terminal. (Se você não tem certeza de qual gerenciador de pacotes está usando, execute o primeiro comando.) Em seguida, siga as instruções e digite "y" no terminal (significando "sim") para cada um.
+
+```sh
+# Usando NPM
+npx astro add tailwind
+# Usando Yarn
+yarn astro add tailwind
+# Usando PNPM
+pnpm astro add tailwind
+```
+
+Se encontrar algum problema, [sinta-se à vontade para relatar no GitHub](https://github.com/withastro/astro/issues) e tente as etapas de instalação manual abaixo.
+
+### Instalação Manual
+
+Primeiro, instale os pacotes `@astrojs/tailwind` e `tailwindcss` usando seu gerenciador de pacotes. Se você estiver usando npm ou não tiver certeza, execute isso no terminal:
+
+```sh
+npm install @astrojs/tailwind tailwindcss
+```
+
+Então, adicione essa integração em seu arquivo `astro.config.*` dentro da propriedade `integrations`:
+
+```diff lang="js" "tailwind()"
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
++ import tailwind from '@astrojs/tailwind';
+
+  export default defineConfig({
+    // ...
+    integrations: [tailwind()],
+    //             ^^^^^^^^^^
+  });
+```
+
+Agora, crie o arquivo `tailwind.config.cjs` na raiz do seu projeto. Você pode usar o seguinte comando para criar uma configuração básica:
+
+```sh
+npx tailwindcss init
+```
+
+Finalmente, adicione essa configuração em seu arquivo `tailwind.config.cjs`:
+
+```diff lang="js" "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
+  // tailwind.config.cjs
+  /** @type {import('tailwindcss').Config} */
+  module.exports = {
++   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  };
+```
+
+## Utilização
+
+Quando instalar a integração, as classes utilitárias do Tailwind já devem estar prontas para uso. Acesse a [documentação do Tailwind](https://tailwindcss.com/docs/utility-first), para aprender como usá-lo corretamente, e se achar uma classe utilitária que deseja usar, adicione ela em qualquer elemento HTML em seu projeto!
+
+O [Autoprefixer](https://github.com/postcss/autoprefixer) é automaticamente adicionado quando estiver trabalhando no modo de desenvolvimento e em builds para produção, fazendo com que as classes do Tailwind funcionem em navegadores antigos.
+
+<Video src="https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4" type="video/mp4" />
+
+## Configuração
+
+### Configurando o Tailwind
+
+Se você seguiu as instruções de Instalação Rápida e respondeu "sim" para todas, verá um arquivo `tailwind.config.cjs` na raiz do seu projeto. Use este arquivo para fazer alterações na configuração do Tailwind. Você pode aprender como personalizar o Tailwind utilizando esse arquivo na [documentação oficial](https://tailwindcss.com/docs/configuration).
+
+Se o arquivo não estiver lá, você pode adicionar seu próprio arquivo `tailwind.config.(js|cjs|mjs)` na raiz do projeto, e a integração usará suas configurações. Isso pode ser ótimo se você já configurou o Tailwind em outro projeto e deseja trazer essas configurações para este.
+
+### Configurando a Integração
+
+A integração Astro Tailwind lida com a comunicação entre o Astro e o Tailwind e tem suas próprias opções. Altere essas opções no arquivo `astro.config.mjs` (não no arquivo de configuração do Tailwind), que é onde ficam as configurações de integração do seu projeto.
+
+#### configFile
+
+Anteriormente chamado de `config.path` no `@astrojs/tailwind` v3. Mais informações no [histórico de mudanças da v4](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) para atualizar suas configurações.
+
+
+Se você desejar usar um arquivo de configuração do Tailwind diferente do `tailwind.config.(js|cjs|mjs)` padrão, adicione a localização do arquivo usando a opção `configFile` da integração. Se o `configFile` é relativo, ele vai ser resolvido relativamente a partir do diretório de trabalho atual.
+
+:::caution
+Não é recomendado a alteração desse valor uma vez que isso pode causar problemas a outras ferramentas que integrem com o Tailwind, como por exemplo a extensão oficial do Tailwind para o VSCode.
+:::
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [
+    tailwind({
+      // Examplo: Adiciona uma caminho customizado para um arquivo de configuração Tailwind
+      configFile: './custom-config.cjs',
+    }),
+  ],
+});
+```
+
+#### applyBaseStyles
+
+Anteriormente chamado de `config.applyBaseStyles` no `@astrojs/tailwind` v3. Veja mais no [histórico de mudanças da v4](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) para atualizar sua configuração.
+
+Por padrão, a integração importa um arquivo basico `base.css` em cada página do seu projeto. Esse arquivo CSS basico inclui as três diretivas principais do `@tailwind`:
+```css
+/* O arquivo base.css injetado por padrão pela integração */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Para desabilitar esse comportamento padrão, configure o valor de `applyBaseStyles` para `false`. Isso pode ser útil em caso você deseje seu próprio arquivo `base.css` (para incluir a [diretiva `@layer`](https://tailwindcss.com/docs/functions-and-directives#layer), por exemplo). Além disso, outra utilidade é caso você não deseje que o arquivo `base.css` seja importado em cada página do seu projeto.
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  integrations: [
+    tailwind({
+      // Exemplo: Desativa a injeção do arquivo básico `base.css` em cada página.
+      // Útil se você precisa definir e/ou importar seu próprio arquivo `base.css` customizado.
+      applyBaseStyles: false,
+    }),
+  ],
+});
+```
+
+Você pode agora [importar seu próprio `base.css` como um folha de estilos local](/pt-br/guides/styling/#importe-uma-folha-de-estilos-local).
+
+## Exemplos
+
+* O template [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) te ajuda a começar com uma base para o seu projeto que utiliza o Tailwind para estilização.
+*   A página inicial do Astro utiliza o Tailwind. Confira seu [arquivo de configuração do Tailwind](https://github.com/withastro/astro.build/blob/main/tailwind.config.ts) ou um [exemplo de componente](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro).
+* Os temas [Astro Ink](https://github.com/one-aalam/astro-ink), [Sarissa Blog](https://github.com/iozcelik/SarissaBlogAstroStarter) e [Creek](https://github.com/robertguss/Astro-Theme-Creek) utilizam o Tailwind para estilização.
+*   [Navegue pelos projetos Astro Tailwind no GitHub](https://github.com/search?q=%22%40astrojs%2Ftailwind%22%3A+path%3A%2Fpackage.json\&type=code) para mais exemplos!
+
+## Solução de problemas
+
+### Classe não existe com diretivas `@apply`
+
+Ao usar a diretiva `@apply` em um componente Astro, Vue, Svelte ou outra integração de componente dentro da tag `<style>`, ela pode gerar erros sobre a não existência da sua classe personalizada do Tailwind e fazer com que a build falhe.
+
+```sh
+error   The `text-special` class does not exist. If `text-special` is a custom class, make sure it is defined within a `@layer` directive.
+```
+
+[Em vez de usar diretivas `@layer` em uma folha de estilo global](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), defina seus estilos personalizados adicionando um plugin ao seu arquivo de configuração do Tailwind para corrigir isso:
+
+```js
+// tailwind.config.cjs
+module.exports = {
+  // ...
+  plugins: [
+    function ({ addComponents, theme }) {
+      addComponents({
+        '.btn': {
+          padding: theme('spacing.4'),
+          margin: 'auto',
+        },
+      });
+    },
+  ],
+};
+```
+
+### Modificadores baseados em classe não funcionam com diretivas `@apply`
+
+Certas classes do Tailwind com modificadores dependem da combinação de classes em vários elementos. Por exemplo, `group-hover:text-gray` é compilado para `.group:hover .text-gray`. Quando isso é usado com a diretiva `@apply` em tags `<style>` do Astro, os estilos compilados são removidos da saída de compilação porque não correspondem a nenhuma marcação no arquivo `.astro`. O mesmo problema também pode ocorrer em componentes de framework que suportam estilos isolados, como Vue e Svelte.
+
+Para corrigir isso, você pode usar classes incorporadas em vez disso:
+
+
+```html
+<p class="text-black group-hover:text-gray">Astro</p>
+```
+
+### Outros
+
+*   Se a sua instalação não parecer estar funcionando, tente reiniciar o servidor de desenvolvimento.
+*   Se você editar e salvar um arquivo e não ver o seu site atualizar de acordo, tente recarregar a página.
+*   Se recarregar a página não atualizar a visualização, ou se uma nova instalação não parecer estar funcionando, reinicie o servidor de desenvolvimento.
+
+Para obter ajuda, confira o canal `#support` no [Discord](https://astro.build/chat). Os membros da nossa amigável equipe de suporte estão aqui para ajudar!
+
+Você também pode conferir nossa [Documentação de Integração do Astro][astro-integration] para mais informações sobre integrações.
+
+[astro-integration]: /pt-br/guides/integrations-guide/
+
+[astro-ui-frameworks]: /pt-br/core-concepts/framework-components/#usando-componentes-de-frameworks
+
+## Contribuição
+
+Este pacote é mantido pela equipe principal do Astro. Você é bem-vindo para enviar uma issue ou PR!
+
+## Histórico de alterações
+
+Veja [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/CHANGELOG.md) para ver o histórico de alterações desta integração.