diff --git a/Execucao/Tailwind e CSS Modules/explicacao.md b/Execucao/Tailwind e CSS Modules/explicacao.md new file mode 100644 index 00000000..3ef6ac60 --- /dev/null +++ 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 + + + + 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. 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_`. +!!! 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..9ee6e81f --- /dev/null +++ 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
{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. + 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 +--- 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