From 7bff6c577b6bee3b419d02f7786e4a4f3230ae94 Mon Sep 17 00:00:00 2001 From: EdPPF Date: Thu, 29 Feb 2024 13:58:23 -0300 Subject: [PATCH 1/3] =?UTF-8?q?Preparando=20estrutura=20e=20escrevendo=20p?= =?UTF-8?q?rimeira=20p=C3=A1gina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Execucao/Tailwind e CSS Modules/explicacao.md | 63 +++++++++++++++++++ Execucao/Tailwind e CSS Modules/index.yml | 5 ++ Execucao/Tailwind e CSS Modules/instalacao.md | 22 +++++++ ...5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg | 1 + 4 files changed, 91 insertions(+) create mode 100644 Execucao/Tailwind e CSS Modules/explicacao.md create mode 100644 Execucao/Tailwind e CSS Modules/index.yml create mode 100644 Execucao/Tailwind e CSS Modules/instalacao.md create mode 100644 Imagens DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg diff --git a/Execucao/Tailwind e CSS Modules/explicacao.md b/Execucao/Tailwind e CSS Modules/explicacao.md new file mode 100644 index 00000000..d8ea80a7 --- /dev/null +++ b/Execucao/Tailwind e CSS Modules/explicacao.md @@ -0,0 +1,63 @@ +--- +order: 2 +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 + + + + Document + + + + +

Hello world!

+ + +``` + +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. +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_`. +!!! diff --git a/Execucao/Tailwind e CSS Modules/index.yml b/Execucao/Tailwind e CSS Modules/index.yml new file mode 100644 index 00000000..caa96e1b --- /dev/null +++ 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 new file mode 100644 index 00000000..b1676e33 --- /dev/null +++ b/Execucao/Tailwind e CSS Modules/instalacao.md @@ -0,0 +1,22 @@ +--- +order: 1 +icon: command-palette +label: "Utilizando Tailwind e CSS no Next" +author: + name: Eduardo P.P. Ferreira +date: 2024-02-28 +category: Instalação +--- + +## Instalando TailwindCSS + +[TEMP] Explicar como instalar e adicionar tailwind a um projeto Next. +[TailwindCSS](https://tailwindcss.com/) + +## Adicionando CSS Modules ao Projeto + +[TODO] Explicar isso aí. + +## O que tiver mais + +[TODO] Explicar o que mais tiver que explicar. diff --git a/Imagens DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg b/Imagens DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg new file mode 100644 index 00000000..6a9ab499 --- /dev/null +++ b/Imagens DocStruct/Logos/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg @@ -0,0 +1 @@ + \ No newline at end of file From 23be3fd8924b42ff4fde162965703671df6a0b4a Mon Sep 17 00:00:00 2001 From: EdPPF Date: Fri, 1 Mar 2024 11:25:55 -0300 Subject: [PATCH 2/3] =?UTF-8?q?Se=C3=A7=C3=A3o=20de=20instala=C3=A7=C3=A3o?= =?UTF-8?q?=20de=20Tailwind=20feita?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Execucao/Tailwind e CSS Modules/explicacao.md | 2 +- Execucao/Tailwind e CSS Modules/instalacao.md | 56 +++++++++++++++++-- Execucao/Tailwind e CSS Modules/utilizacao.md | 9 +++ 3 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 Execucao/Tailwind e CSS Modules/utilizacao.md diff --git a/Execucao/Tailwind e CSS Modules/explicacao.md b/Execucao/Tailwind e CSS Modules/explicacao.md index d8ea80a7..50ac7737 100644 --- a/Execucao/Tailwind e CSS Modules/explicacao.md +++ b/Execucao/Tailwind e CSS Modules/explicacao.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 icon: question label: "O que são TailwindCSS e CSS Modules?" author: diff --git a/Execucao/Tailwind e CSS Modules/instalacao.md b/Execucao/Tailwind e CSS Modules/instalacao.md index b1676e33..54c8ec94 100644 --- a/Execucao/Tailwind e CSS Modules/instalacao.md +++ b/Execucao/Tailwind e CSS Modules/instalacao.md @@ -1,7 +1,7 @@ --- -order: 1 +order: 2 icon: command-palette -label: "Utilizando Tailwind e CSS no Next" +label: "Instalando Tailwind e CSS no Next" author: name: Eduardo P.P. Ferreira date: 2024-02-28 @@ -10,8 +10,56 @@ category: Instalação ## Instalando TailwindCSS -[TEMP] Explicar como instalar e adicionar tailwind a um projeto Next. -[TailwindCSS](https://tailwindcss.com/) +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`, por meio do comando `npx tailwindcss init` e adicione o seguinte código: + +```typescript +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 +@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 diff --git a/Execucao/Tailwind e CSS Modules/utilizacao.md b/Execucao/Tailwind e CSS Modules/utilizacao.md new file mode 100644 index 00000000..a3f57d3f --- /dev/null +++ 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 +--- From 5607e65964fe48c7bb1216b945ad0a128e37467e Mon Sep 17 00:00:00 2001 From: EdPPF Date: Thu, 7 Mar 2024 13:48:37 -0300 Subject: [PATCH 3/3] =?UTF-8?q?Instala=C3=A7=C3=A3o=20documentada=20e=20al?= =?UTF-8?q?guns=20hotfix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Execucao/Tailwind e CSS Modules/explicacao.md | 2 +- Execucao/Tailwind e CSS Modules/instalacao.md | 30 +++++++++++++++---- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/Execucao/Tailwind e CSS Modules/explicacao.md b/Execucao/Tailwind e CSS Modules/explicacao.md index 50ac7737..3ef6ac60 100644 --- a/Execucao/Tailwind e CSS Modules/explicacao.md +++ b/Execucao/Tailwind e CSS Modules/explicacao.md @@ -53,7 +53,7 @@ Tailwind tem essa idea como foco de seu funcionamento. De acordo com [sua própr ## CSS Modules -*CSS Modules* são estilos escritos em CSS que atuam em escopo local. +*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. diff --git a/Execucao/Tailwind e CSS Modules/instalacao.md b/Execucao/Tailwind e CSS Modules/instalacao.md index 54c8ec94..9ee6e81f 100644 --- a/Execucao/Tailwind e CSS Modules/instalacao.md +++ b/Execucao/Tailwind e CSS Modules/instalacao.md @@ -20,9 +20,9 @@ Para [instalar Tailwind](https://tailwindcss.com/docs/guides/nextjs) usando sua npm install -D tailwindcss ``` -Depois, crie um arquivo chamado `tailwind.config.js`, por meio do comando `npx tailwindcss init` e adicione o seguinte código: +Depois, crie um arquivo chamado `tailwind.config.js` (ou `.ts`) por meio do comando `npx tailwindcss init` e adicione o seguinte código: -```typescript +```typescript tailwind.config.ts import type { Config } from "tailwindcss"; const config: Config = { @@ -51,7 +51,7 @@ O arquivo `tailwind.config.js` pode ter tanto essa extensão quanto `.ts`, depen Por fim, adicione as *diretivas do Tailwind* ao seu arquivo de CSS global (`src/app/globals.css`): -```css +```css src/app/global.css @tailwind base; @tailwind components; @tailwind utilities; @@ -63,8 +63,26 @@ O `global.css` é um arquivo que aplica estilos de maneira global à sua aplica ## Adicionando CSS Modules ao Projeto -[TODO] Explicar isso aí. +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: -## O que tiver mais +```typescript app/dashboard/layout.ts +import styles from './styles.module.css' + +export default function DashboardLayout ({ + children, +}: { + children: React.ReactNode +}) { + return
{children}
+} +``` + +```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. -[TODO] Explicar o que mais tiver que explicar.