translate tailwind-css.md

docs/docs/tailwind-css.md

@@ -2,111 +2,111 @@
 title: Tailwind CSS
 ---
 
-Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This guide will show you how to get started with Gatsby and [Tailwind CSS](https://tailwindcss.com/).
+Tailwind é uma estrutura [utility-first](https://tailwindcss.com/docs/utility-first/) CSS para criar rapidamente interfaces de usuário personalizadas. Este guia mostra como iniciar com Gatsby e o [Tailwind CSS](https://tailwindcss.com/).
 
-## Overview
+## Visão geral
 
-There are two ways you can use Tailwind with Gatsby:
+Existem duas maneiras de usar o Tailwind com o Gatsby:
 
-1. Standard: Use PostCSS to generate Tailwind classes, then you can apply those classes using `className`.
-2. CSS-in-JS: Integrate Tailwind classes into Styled Components.
+1. Standard: Use o PostCSS para gerar classes Tailwind, e você poderá aplicá-las usando `className`.
+2. CSS-in-JS: Integrar classes Tailwind com Styled-Components.
 
-You have to install and configure Tailwind for both of these methods, so this guide will walk through that step first, then you can follow the instructions for either PostCSS or CSS-in-JS.
+Você precisa instalar e configurar o Tailwind para ambos os métodos, portanto, este guia percorrerá essa etapa primeiro, e então você pode seguir as instruções para PostCSS ou CSS-in-JS.
 
-## Installing and configuring Tailwind
+## Instalando e configurando o Tailwind
 
-This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start), then come back.
+Este guia pressupõe que você já tenha um projeto Gatsby configurado. Se você precisar configurar um projeto, acesse o [**Guia de Inicio Rápido**](/docs/quick-start), e depois volte aqui.
 
-1. Install Tailwind
+1. Instale o Tailwind
 
 ```shell
 npm install tailwindcss --save-dev
 ```
 
-2. Generate Tailwind config file (optional)
+2. Gere o arquivo de configuração Tailwind (opcional)
 
-**Note**: A config file isn't required for Tailwind 1.0.0+
+**Nota**: Não é necessário um arquivo de configuração para o Tailwind 1.0.0+
 
-To configure Tailwind, you'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:
+Para configurar o Tailwind, você precisará adicionar um arquivo de configuração Tailwind. Felizmente, Tailwind tem um script interno para fazer isso. Basta executar o seguinte comando:
 
 ```shell
 npx tailwind init
 ```
 
-### Option #1: PostCSS
+### Opção #1: PostCSS
 
-1.  Install the Gatsby PostCSS plugin [**gatsby-plugin-postcss**](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss).
+1.  Instale o plugin Gatsby PostCSS [**gatsby-plugin-postcss**](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss).
 
 ```shell
 npm install --save gatsby-plugin-postcss
 ```
 
-2.  Include the plugin in your `gatsby-config.js` file.
+2.  Inclua o plugin no seu arquivo `gatsby-config.js`.
 
 ```javascript:title=gatsby-config.js
 plugins: [`gatsby-plugin-postcss`],
 ```
 
-3. Configure PostCSS to use Tailwind
+3. Configure o PostCSS para usar o Tailwind
 
-Create a postcss.config.js in your project's root folder with the following contents.
+Crie um `postcss.config.js` na pasta raiz do seu projeto com o seguinte conteúdo.
 
 ```javascript:title=postcss.config.js
 module.exports = () => ({
-  plugins: [require("tailwindcss")],
+  plugins: [require("tailwindcss")]
 })
 ```
 
-4. Use the Tailwind Directives in your CSS
+4. Use as diretivas Tailwind no seu CSS
 
-You can now use the `@tailwind` directives to add Tailwind's utilities, preflight, and components into your CSS. You can also use `@apply` and all of Tailwind's other directives and functions!
+Agora você pode usar as diretivas `@tailwind` para adicionar os utilitários do Tailwind, [preflight](https://tailwindcss.com/docs/preflight/) e componentes em seu CSS. Você também pode usar o `@apply` e todas as outras diretivas e funções do Tailwind!
 
-To learn more about how to use Tailwind in your CSS, visit the [Tailwind Documentation](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css)
+Para saber mais sobre como usar o Tailwind no seu CSS, visite a [Documentação do Tailwind](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css).
 
-### Option #2: CSS-in-JS
+### Opção #2: CSS-in-JS
 
-These steps assume you have a CSS-in-JS library already installed, and the examples are based on Styled Components.
+Essas etapas supõem que você já tenha uma biblioteca CSS-in-JS instalada e os exemplos são baseados na biblioteca Styled Components.
 
-1. Install Tailwind Babel Macro
+1. Instale o Tailwind Babel Macro
 
-**Note**: `tailwind.macro` isn't currently compatible with Tailwind 1.0.0+. However, a compatible beta is available at `tailwind.macro@next`. Feel free to either use the beta or revert to TailwindCSS 0.7.4.
+**Nota**: `tailwind.macro` atualmente não é compatível com Tailwind 1.0.0+. Contudo, um beta compatível está disponível em `tailwind.macro@next`. Sinta-se à vontade para usar o beta ou reverter para o TailwindCSS 0.7.4.
 
-**Option 1**: Install `tailwind.macro@next` and use Tailwind 1.0.0+
+**Opção 1**: Instale `tailwind.macro@next` e use o Tailwind 1.0.0+
 
 ```shell
 npm install --save tailwind.macro@next
 ```
 
-**Option 2**: Install stable `tailwind.macro` and use Tailwind 0.7.4
+**Opção 2**: Instale a versão estável do `tailwind.macro` e use o Tailwind 0.7.4
 
 ```bash
-// Remove tailwind 1.0.0+ if you've already installed it
+// Remova o tailwind 1.0.0+ se você já o instalou
 npm uninstall tailwindcss
 
-// Install tailwind 0.7.4 and stable tailwind.macro
+// Instale o tailwind 0.7.4 e a versão estável do tailwind.macro
 npm install [email protected]
 npm install tailwind.macro
 ```
 
-2. Use the Babel Macro (tailwind.macro) in your styled component
+2. Use o Babel Macro (tailwind.macro) no seu styled component
 
 ```javascript
 import styled from "styled-components"
 import tw from "tailwind.macro"
 
-// All versions
+// Todas as versões
 const Button = styled.button`
-  ${tw`bg-blue hover:bg-blue-dark text-white p-2 rounded`};
-`
+  ${tw`bg-blue hover:bg-blue-dark text-white p-2 rounded`}
+`;
 
 // tailwind.macro@next
 const Button = tw.button`
   bg-blue hover:bg-blue-dark text-white p-2 rounded
 `
 ```
 
-## Other resources
+## Outros recursos
 
-- [Introduction to PostCSS](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)
-- [Tailwind Documentation](https://tailwindcss.com/)
-- [Gatsby starters that use Tailwind](/starters/?c=Styling%3ATailwind&v=2)
+- [Introdução ao PostCSS](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)
+- [Documentação do Tailwind](https://tailwindcss.com/)
+- [Projetos Gatsby que usam Tailwind](/starters/?c=Styling%3ATailwind&v=2)