StructCE · EdPPF · Feb 29, 2024 · Mar 1, 2024 · Mar 7, 2024
diff --git a/Execucao/Tailwind e CSS Modules/explicacao.md b/Execucao/Tailwind e CSS Modules/explicacao.md
@@ -0,0 +1,63 @@
+---
+order: 3
+icon: question
+label: "O que são TailwindCSS e CSS Modules?"
+author:
+    name: Eduardo P.P. Ferreira
+date: 2024-02-28
+category: Explicação
+tags:
+    - styles
+    - explicacao
+---
+
+## Estilos em NextJS
+
+NextJS permite utilizar várias formas de estilizar sua aplicação, como *inline CSS*, *Global CSS*, *CSS Modules*, *Tailwind CSS*, *Sass* e *CSS-in-JS*. Todos são explicados na [documentação oficial](https://nextjs.org/docs/app/building-your-application/styling), mas aqui vamos focar em **Tailwind** e **CSS Modules**.
+
+## TailwindCSS
+
+[TailwindCSS](https://tailwindcss.com/) é um framework CSS "*utility-first*", o que significa que ele disponibiliza várias classes utilitárias de propósito único para customizar elementos.
+
+> "Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file."
+> \- [TailwindCSS](https://tailwindcss.com/docs/installation)
+
+O propósito de Tailwind é baseado na ideia de *Atomic CSS*, que, de maneira simples, propõe a criação de classes com um propósito único bem definido. Por exemplo, ao invés de escrever a estilização de uma cor para um background de um elemento diretamente nele, criamos uma classe e a chamamos nele:
+
+```CSS
+.bg-blue {
+  background-color: rgb(81, 191, 255);
+}
+```
+
+```HTML
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <!-- Classe bg-blue que criamos antes -->
+    <div><h1 class="bg-blue">Hello world!</h1></div>
+  </body>
+</html>
+```
+
+Tailwind tem essa idea como foco de seu funcionamento. De acordo com [sua própria documentação](https://tailwindcss.com/docs/utility-first),
+
+> "With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
+> ...
+>
+> This approach allows us to implement a completely custom component design without writing a single line of custom CSS."
+
+## CSS Modules
+
+*CSS Modules* são estilos escritos em CSS que atuam em escopo local. São uma forma de importar arquivos CSS em um componente React.
+Next possui suporte nativo a isso por meio de arquivos nomeados com o formato `[nome].module.css`.
+
+A vantagem de usar CSS Modules é que fica mais simples evitar conflitos quando utilizamos o mesmo nome de classes em diferentes componentes da aplicação, já que o escopo de um módulo é restrito ao componente no qual foi chamado.
+
+!!!info Como funciona isso?
+Caso esteja se perguntando como CSS Modules resolve conflitos de nomenclatura, dê uma olhada [nessa documentação](https://github.com/css-modules/css-modules). Basicamente, os módulos são nomeados automaticamente utilizando um *hash* de acordo com o formato `[filename]_[classname]_[hash]`. Então, uma classe definida sem CSS Modules chamada `description` seria nomeada como `description`, enquanto uma classe de mesmo nome definida em um CSS Module nomeado `styles.module.css` seria chamada internamente de `styles_description_<hash>`.
+!!!
diff --git a/Execucao/Tailwind e CSS Modules/index.yml b/Execucao/Tailwind e CSS Modules/index.yml
@@ -0,0 +1,5 @@
+icon: Imagens DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg
+label: Tailwind e CSS Modules
+author:
+  name: Eduardo P.P. Ferreira
+date: 2024-02-28
diff --git a/Execucao/Tailwind e CSS Modules/instalacao.md b/Execucao/Tailwind e CSS Modules/instalacao.md
@@ -0,0 +1,88 @@
+---
+order: 2
+icon: command-palette
+label: "Instalando Tailwind e CSS no Next"
+author:
+    name: Eduardo P.P. Ferreira
+date: 2024-02-28
+category: Instalação
+---
+
+## Instalando TailwindCSS
+
+Quando você cria um projeto Next utilizando o comando `npx create-next-app@latest`, aparecerá a opção `Would you like to use Tailwind CSS?`. Nesse caso, ao optar por `Yes`, Tailwind já será adicionado ao projeto.
+
+Caso você precise adicionar Tailwind manualmente, existem algumas formas, mas a mais simples é utilizar a CLI (Command Line Interface) do Tailwind.
+
+Para [instalar Tailwind](https://tailwindcss.com/docs/guides/nextjs) usando sua CLI, use o seguinte comando no terminal:
+
+```bash
+npm install -D tailwindcss
+```
+
+Depois, crie um arquivo chamado `tailwind.config.js` (ou `.ts`) por meio do comando `npx tailwindcss init` e adicione o seguinte código:
+
+```typescript tailwind.config.ts
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;
+```
+
+!!!info
+O arquivo `tailwind.config.js` pode ter tanto essa extensão quanto `.ts`, dependendo se você quiser utilizar JavaScript ou TypeScript. Se você iniciou sua aplicação Next optando por usar TypeScript e Tailwind, o arquivo terá a extensão `.ts`. Se você criou o arquivo com o comando acima mas está utilizando TypeScript em seu projeto, talvez seja uma boa ideia mudar a extensão.
+!!!
+
+Por fim, adicione as *diretivas do Tailwind* ao seu arquivo de CSS global (`src/app/globals.css`):
+
+```css src/app/global.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+!!!info
+O `global.css` é um arquivo que aplica estilos de maneira global à sua aplicação. Então, ao colocar essas diretivas nele, Tailwind estará disponível para ser utilizado em qualquer parte do seu projeto.
+!!!
+
+## Adicionando CSS Modules ao Projeto
+
+Para utilizar CSS Modules em sua aplicação next, basta criar arquivos com a extensão `.module.css`. Isso pode ser feito em qualquer pasta dentro de `/app`, e os arquivos CSS Modules criados podem ser importados em qualquer outro arquivo dentro dessa pasta, como a [própria documentação](https://nextjs.org/docs/app/building-your-application/styling/css-modules) exemplifica:
+
+```typescript app/dashboard/layout.ts
+import styles from './styles.module.css'
+
+export default function DashboardLayout ({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section className={styles.dashboard}> {children} </section>
+}
+```
+
+```css spp/dashboard/styles.modules.css
+.dashboard {
+  padding: 24px,
+  ...
+}
+```
+
+Lembrando que CSS Modules *são opcionais* e atuam em escopo local, o que significa que podem evitar conflitos de nomeclatura de classes em arquivos de estilo diferentes.
+
diff --git a/Execucao/Tailwind e CSS Modules/utilizacao.md b/Execucao/Tailwind e CSS Modules/utilizacao.md
@@ -0,0 +1,9 @@
+---
+order: 1
+icon: rocket
+label: "Utilização"
+author:
+    name: Eduardo P.P. Ferreira
+date: 2024-02-28
+category: Instalação
+---
diff --git a/...s DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg b/...s DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg