`**, você pode alcançar resultados interessantes: ```html

``` Neste exemplo, o elemento **`

`** terá o estilo **`display: flex`** em contextos padrão do projeto, mas quando a largura da tela for menor que 1024px, o estilo será alterado para **`display: grid`**, permitindo uma transição suave e eficiente entre layouts responsivos. Aqui o resultado final, em um CSS padrão, ficaria assim: ```css .dp-flex{ display: flex; } @media (max-width: 1024px){ .mob\:dp-grid{ display: grid; } } ``` Se for necessário atribuir novos tipos de breakpoints para o seu projeto, você pode editar essa lista de breakpoints presentes no *`wpf.config.yaml`* para criar seus próprios pontos de quebra customizados para designs responsivos. ### **Importância** As **atribuições de importância** servem para definir, em um código CSS onde um elemento possuí duas vezes o mesmo atributo sob situações conflitantes, um ponto de partida para que o CSS descubra qual regra deve sempre se sobressair como o estilo dominante. Leve por exemplo um elemento que precisa mudar o seu tamanho sem necessariamente estar sob um breakpoint. Ele tem um tamanho original de 50% (informado pela classe utilitária `w-50%`). Esse mesmo elemento receberá do JavaScript uma nova classe que mudará o seu tamanho para 25% (informado pela classe utilitária `w-25%`) quando o usuário clicar em algum botão dentro do site. Como são elementos conflitantes (a largura, no caso), dificilmente o navegador saberá entender que o valor de 25% é o correto a ser aplicado agora. Informando o código que o novo estilo **é mais importante** (atribuindo a classe utilitária com o modificador de importância `!w-25%`) agora o navegador saberá o momento em que o elemento precisa ter 25% de largura e o momento em que ele precisa ter 50%. ```html

``` O resultado final disso, em um arquivo CSS comum, seria bem simples: ```css .w-50\%{ width: 50%; } .\!w-25\%{ width: 25%!important; } ``` É possível adicionar esse tipo de comportamento à elementos que estão com **atribuições de responsividade**. Veja um exemplo: ```html

``` ### **Pseudo Elementos** Por último, existem as atribuições que chamamos normalmente no CSS como **pseudo elementos**. Isso implica a todos os elementos virtuais que podem ser gerados pelo *DOM* via CSS, como **:active, ::placeholder, ::after, ::before** etc. No WPF, alguns desses pseudo elementos possuem um suporte nativo pela ferramenta, e podem receber estilos e classes diretamente informando o pseudo-elemento que você deseja ativar/inserir para aquele elemento HTML. Para definir um pseudo elemento à um elemento HTML é muito simples: basta você escrevê-lo antes da classe e de qualquer outra atribuição adicional que esteja inserindo à uma classe utilitária WPF. Daremos um exemplo: ```html

``` No exemplo acima, o elemento possuí a cor de background `var(--c-bg-1)` que é automaticamente alterada para `var(--c-bg-2)` no momento em que o usuário passar o cursor do mouse por cima do elemento, ou seja, através da ativação do pseudo elemento **:hover**. Esses tipos de atribuições não geram um resultado diretamente no CSS, mas são lidos de maneira dinâmica diretamente no navegador. É importante lembrar que as **atribuições de pseudo elementos funcionam em conjunto com os outros tipos de atribuições, como as de responsividade ou importância**. Veja um exemplo: ```html

``` No exemplo acima, a versão natural do componente não possuí um comportamento com o pseudo elemento **:hover**. Esse comportamento foi instruído para acontecer somente em um contexto responsivo, com duas outras cores completamente diferentes. # Declarando e Usando Variáveis CSS As variáveis customizadas de cada projeto são inseridas dentro de uma pasta chamada **"vars"**. Todos os arquivos nessa pasta são automaticamente incluídos como variáveis no framework. No entanto, existe um arquivo específico dentro dessa pasta chamado `_default.scss`, onde ***variáveis especiais podem ser declaradas***. É importante frisar que **variáveis especiais precisam ser declaradas entre aspas simples**. Isso é exigido não só pelo manual de boas práticas do próprio SASS como também porque essas variáveis passam por vários tratamentos específicos e não funcionarão de outra maneira. [Sass Guidelines](https://sass-guidelin.es/#about-sass) ## **Grupos de Variáveis** As variáveis são organizadas em grupos específicos pré-determinados para facilitar o gerenciamento e a aplicação consistente em todo o projeto. Alguns dos grupos comuns incluem: ### **Cores** As cores são frequentemente organizadas em grupos separados com diferentes propósitos, como cores de fundo, cores de texto, cores de borda, cores de gradiente, etc. Aqui está um exemplo de como os grupos de cores podem ser declarados: ```scss //* Cores de Fundo $c-backgrounds: ( "c-bg-1": '#141616', "c-bg-2": '#FFFFFF', ); //* Cores de Texto $c-strings: ( "c-s-1": '#FFFFFF', "c-s-2": '#999999', ); //* Cores de Bordas $c-borders: ( "c-border-1": '#444444', "c-border-2": '#666666', ); ``` ### **Temas** Os temas podem incluir uma variedade de cores específicas de design, como cores principais, secundárias, acentuadas, etc. Aqui está um exemplo de como os temas podem ser declarados: ```scss //* Cores do Tema $c-themes: ( "c-t1-050": #effcfc, "c-t1-100": #d8f5f4, "c-t1-400": #42c1c7, //? Main ); ``` ## **Uso das Variáveis** Depois de declaradas as variáveis, elas podem ser facilmente utilizadas em todo o projeto por meio de classes específicas. Por exemplo, para usar uma cor de fundo específica em um elemento HTML, podemos adicionar a classe correspondente: ```html

``` Se quisermos aplicar estilos diferentes para dispositivos móveis, podemos adicionar classes específicas para isso: ```html

``` Isso permite que tenhamos controle granular sobre a aparência de elementos em diferentes dispositivos. ## **Funções de Classe** Além das classes específicas para aplicação de variáveis, também existem funções de classe para casos comportamentais diferentes. Por exemplo: - Alterar a fonte de alguma maneira: **`fnt(var)`** - Alterar a cor de fundo: **`bg(var)`** - Alterar a cor de texto: **`c(var)`** - Alterar a cor de borda: **`bc(var)`** - Adicionar efeitos visuais: `fx(param,var)` / `fx(var)` Essas funções de classe permitem uma aplicação mais flexível e eficiente das variáveis CSS em todo o projeto. ## Usando as variáveis dentro de outros arquivos SCSS Todas as variáveis declaradas no arquivo `_default.scss` geram uma versão de variável CSS comum. Essa versão permite o uso das variáveis dentro de outros arquivos CSS do projeto. Por exemplo, a variável **`c-bg-1`**, que pode ser diretamente usada no HTML como **`bg(c-bg-1)`**, também pode ser utilizada no CSS da seguinte maneira: ```css background-color: var(--c-bg-1); ``` Isso oferece flexibilidade adicional para o uso das variáveis em diferentes contextos dentro do projeto. # Classes Utilitárias Aprenda a usar todas as classes utilitárias auxiliares do WPF, desde o seu conceito até a aplicação. # Nova Página # Position O atributo **position** é retratado de uma maneira bem natural e intuitiva pelo WPF. Para atribuir classes utilitárias de posição no seu código, basta escrever o nome do valor do atributo diretamente como uma classe css: ```html

``` Abaixo segue uma lista com todas as posições suportadas pelo framework:

Classe Utilitária	Comportamento
`static`	Posicionamento padrão, segue o fluxo normal do documento.
`sticky`	Alterna entre `relative` e `fixed`, fixando o elemento ao atingir um ponto de rolagem definido.
`relative`	Posicionado relativo à sua posição original. Permite ajustes com `top`, `right`, `bottom` e `left`.
`absolute`	Posicionado em relação ao ancestral mais próximo com posição não `static`, sai do fluxo normal.
`fixed`	Posicionado em relação à janela do navegador, permanece fixo durante a rolagem.

# Offset As classes utilitárias de offsets no **WPF** permitem ajustar a posição de elementos com as propriedades CSS top, right, bottom e left. Elas são projetadas para serem intuitivas, seguindo uma sintaxe clara e flexível, compatível com unidades como `%`, `px`, `dvh` e `dvw`. ### Como Funcionam as Classes de Offsets As classes de offsets seguem o padrão: (propriedade)(valor)(unidade), onde: - **Propriedade**: `top`, `right`, `bottom` ou `left`. - **Valor**: Um número inteiro (positivo ou negativo) que define o deslocamento. - **Unidade**: Opcional, pode ser `%`, `px`, `dvh` (altura dinâmica da viewport) e `dvw` (largura dinâmica da viewport). Se omitida, o valor é tratado como unitless (ex.: `top(10)` equivale a `top: 10;`). Isso significa que uma classe válida segue este formato: ```html

``` ### Usando Funções de Classe para Centralização As classes utilitárias de centralização do **WPF** simplificam o alinhamento de elementos horizontalmente, verticalmente ou em ambos os eixos. Elas combinam as propriedades left, top e transform para posicionar elementos com precisão, especialmente em elementos com position: `absolute`, `fixed` ou `sticky`. #### Como Funcionam as Classes de Centralização As classes de centralização seguem uma sintaxe simples e intuitiva: **center(tipo)**, onde o tipo define o eixo de centralização: As classes de centralização **são ideais para elementos com** **position:** `absolute`, `fixed` ou `sticky`, **dentro ou fora de um contêiner pai com** **position semelhante**. Certifique-se de que o elemento pai tenha dimensões definidas de alguma maneira (ex.: width e height) para que a centralização funcione corretamente.

Classe Utilitária	Comportamento
`center(h)`	Centraliza horizontalmente o elemento.
`center(v)`	Centraliza verticalmente o elemento.
`center(c)`	Centraliza em ambos* os eixos (horizontal e vertical).*

Com essa sintaxe, confira alguns exemplos dessas funções de classe em execução: ```html

``` ### Notas

**Posicionamento**: As classes de centralização requerem que o elemento tenha position: `absolute`, `fixed` ou `sticky`.

**Contêiner Pai**: Certifique-se de que o elemento pai tenha algum atributo position não estático e dimensões definidas de alguma maneira.

**Transformações Adicionais**: Certifique-se que, ao usar outros tipos de **configurações de transformação**, que elas não sobrescrevam os seus estilos!

# Z-Index As classes utilitárias de z-index do **WPF** permitem controlar a ordem de empilhamento de elementos no eixo Z, definindo qual elemento aparece acima ou abaixo de outros. Elas são ideais para layouts com sobreposições, como modais, menus ou elementos posicionados com absolute ou fixed. ### Como Funcionam as Classes de Z-Index As classes de z-index seguem o padrão: **z-(valor)**, onde: - **Valor**: Um número inteiro (positivo ou negativo) que define a ordem de empilhamento. - **Sintaxe**: A classe é formada por *z-* seguido de um número, como `z-10`, `z--5` ou `z-0`. #### Regras CSS Geradas Cada classe é traduzida diretamente para a propriedade CSS z-index. Por exemplo: - `z-10` → `z-index: 10;` - `z--5` → `z-index: -5;` - `z-0` → `z-index: 0;` ### Como Usar As classes de **z-index** são aplicadas a elementos com position: `absolute`, `relative`, `fixed` ou `sticky`, já que o z-index só afeta elementos posicionados. Use-as para controlar a sobreposição de elementos em layouts complexos. #### Exemplo 1: Sobreposição Simples Posicione um elemento acima de outro: ```html

``` #### Exemplo 2: Z-Index Negativo Coloque um elemento abaixo do conteúdo padrão: ```html

``` ### Notas

**Valores altos**: Use valores como `z-100` ou superiores para elementos que devem ficar **acima de tudo**, como *modais*.

**Valores negativos**: Use `z--1` ou **inferiores** para **elementos de fundo ou camadas abaixo do conteúdo principal**.

O **z-index** só funciona em elementos com position diferente de `static`.

Valores maiores de **z-index** colocam o elemento mais acima na ordem de empilhamento.

Evite valores extremamente altos (ex.: `z-999999`) para **manter a manutenção do código simples**.

# Overflow As classes utilitárias de `overflow` do **WPF** controlam como o conteúdo excedente de um elemento é tratado, permitindo gerenciar a visibilidade e o comportamento de rolagem em elementos com dimensões limitadas. Elas são ideais para layouts com *contêineres*, *modais* ou áreas de conteúdo **restritas**. ### Como Funcionam as Classes de Overflow As classes de `overflow` seguem uma sintaxe intuitiva que permite definir o comportamento geral ou por eixo **(x ou y)**, com ou sem tipo específico (`hidden`, `scroll`, `visible`). O padrão `overflow` sem modificadores aplica `overflow: auto;` como valor padrão.

Atributos Válidos	Comportamento
`auto`	Deixa o navegador encarregado do comportamento. Seu funcionamento pode variar.
`hidden`	O conteúdo é cortado e nenhuma barra de rolagem é exibida.
`scroll`	O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise.
`visible`	*Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.*

As classes são traduzidas diretamente para propriedades CSS. Veja alguns exemplos: - `overflow`→ `overflow: auto;` - `overflow-x` → `overflow-x: auto;` - `overflow-y-hidden` → `overflow-y: hidden;` - `overflow-scroll` → `overflow: scroll;` ### Como Usar As classes de `overflow` são aplicadas a elementos com dimensões definidas (ex.: `width`, `height`, `max-width`, `max-height`) para controlar o comportamento do conteúdo que excede essas dimensões. Elas são úteis para criar áreas roláveis, ocultar conteúdo excedente ou manter visibilidade. #### Exemplo 1: Overflow Padrão Aplica rolagem automática para conteúdo excedente em ambas as direções: ```html

``` #### Exemplo 2: Overflow por Eixo Habilita rolagem horizontal, mas oculta o conteúdo vertical excedente: ```html

``` #### Exemplo 3: Overflow com Tipo Específico Cria uma área com rolagem vertical forçada e conteúdo horizontal visível: ```html

``` #### Exemplo 4: Combinação com Posicionamento Usa overflow com classes de posicionamento e centralização: ```html

``` #### Notas

**Dimensões**: Sempre defina `width`, `height`, `max-width` ou `max-height` no elemento para que o `overflow` funcione corretamente.

**Rolagem Automática**: Use `overflow` ou `overflow-(x|y)` para rolagem apenas quando necessário.

**Combinações**: Combine com classes de posicionamento (`absolute`, `relative`, etc.) e offsets (`top`, `left`, etc.) para layouts complexos.

**Forçar Rolagem**: Aplicar o tipo `scroll` em um elemento evita o problema de barras de rolagem aparecendo e desaparecendo **quando o conteúdo é dinâmico**. Tenha em mente que **Impressoras podem imprimir o conteúdo vazado**.

As classes `overflow-x` e `overflow-y` são úteis para controle granular em layouts responsivos.

O valor `visible` pode causar sobreposição de conteúdo fora do contêiner, então use com cuidado.

Para áreas roláveis, certifique-se de que o contêiner tenha conteúdo suficiente para ativar a rolagem.

# Text-Align Os alinhadores de texto do **WPF** são classes utilitárias que controlam o alinhamento horizontal de texto em elementos HTML. Eles utilizam a propriedade CSS `text-align` para oferecer flexibilidade e simplicidade no ajuste de layouts textuais. ### Como Funcionam os Alinhadores de Texto Os alinhadores seguem as seguintes definições principais:

Classe Utilitária	Comportamento
`t-left`	Alinha o texto à esquerda.
`t-center`	Centraliza o texto.
`t-right`	Alinha o texto à direita.
`t-start`	Alinha o texto no início da direção configurada do texto.
`t-end`	Alinha o texto no final da direção configurada do texto.
`t-justify`	Justifica o texto.
`t-justify-all`	Justifica todas as linhas do texto, incluindo a última.

### Exemplos de Uso #### Alinhamento Básico ```html

``` #### Alinhamento Dinâmico ```html

``` #### Justificação ```html

``` ### Notas

**Suporte a Idiomas**: Use `t-start` e `t-end` para layouts que precisam se adaptar a direções de texto como *RTL (right-to-left)*.

**Justify vs. Justify-All**: `t-justify` é ideal para parágrafos normais, enquanto `t-justify-all` é útil para textos curtos que exigem alinhamento completo.

O valor `justify-all` pode **não ser suportado** em navegadores mais antigos; teste a compatibilidade se necessário.

# Word-Break As classes utilitárias de `word-break` no WPF são projetadas para controlar o comportamento de quebra de palavras em elementos HTML, utilizando a propriedade CSS `word-break`. Elas são ideais para gerenciar textos longos, layouts responsivos ou conteúdos em idiomas que não utilizam espaços entre palavras. ### Como Funcionam as Classes de Word-Break As classes seguem uma sintaxe simples e intuitiva, permitindo ajustar a quebra de palavras de acordo com a necessidade. Veja as classes disponíveis:

Classes Utilitárias	Comportamento
`w-nobreak`	Usa o comportamento padrão* de quebra de palavras, onde o texto só é quebrado em espaços em branco ou pontos naturais. Palavras longas podem ultrapassar os limites do contêiner se não houver espaços suficientes.*
`w-break`	Permite que palavras longas sejam quebradas em pontos arbitrários para se ajustar ao contêiner, evitando overflow. Ideal para textos em idiomas ocidentais com palavras extensas.
`w-break-all`	Quebra o texto em qualquer ponto, inclusive dentro de palavras. Útil para idiomas sem espaços, como chinês ou japonês.
`w-break-keep-all`	Impede a quebra dentro de palavras, mantendo-as intactas. Pode causar overflow se as palavras forem longas, sendo ideal para preservar a integridade de palavras em idiomas com espaços.

### Como Usar Aplique essas classes a elementos de texto como `

`, `

` ou ``. Elas são especialmente úteis em layouts responsivos ou para textos multilíngues com diferentes necessidades de quebra. #### Exemplo 1: Comportamento Padrão ```html

Palavra longa: Supercalifragilisticexpialidocious

``` #### Exemplo 2: Quebra de Palavras Longas ```html

Palavra longa: Supercalifragilisticexpialidocious

``` #### Exemplo 3: Quebra em Qualquer Ponto ```html

Texto em chinês: 这是一个很长的句子，没有空格。

``` #### Exemplo 4: Preservar Palavras ```html

Texto em japonês: これは非常に長い文で、単語を壊さないようにします。

``` ### Dicas de Uso - **Idiomas sem Espaços**: Use `w-break-all` para textos em *chinês*, *japonês* ou *tailandês*. - **Preservar Palavras**: Prefira `w-break-keep-all` para idiomas como *português* ou *inglês*, mantendo a legibilidade. - **Combinações**: Combine com classes de `overflow` (ex.: `overflow-hidden`) para gerenciar excessos de texto. - **Responsividade**: Use `w-break` com larguras dinâmicas (ex.: `w-100%`) para layouts adaptáveis. - **Testes**: Verifique o comportamento em diferentes navegadores, especialmente para idiomas específicos. ### Notas

O uso de `w-break-all` pode afetar a legibilidade; **aplique com cuidado** e teste o resultado visual.

As classes `w-nobreak` e `w-break` são mais comuns em **idiomas ocidentais**, enquanto `w-break-all` e `w-break-keep-all` atendem a necessidades de **idiomas asiáticos** ou **textos técnicos**.

# Text-Wrap As classes utilitárias de `text-wrap` no **WPF** permitem controlar como o texto é quebrado e exibido em um elemento, utilizando a propriedade CSS `text-wrap`. Elas são ideais para ajustar a apresentação de texto em layouts variados, desde evitar quebras de linha até aplicar modos avançados de formatação. A propriedade `text-wrap` define o comportamento de quebra de linha do texto dentro de um contêiner. Com as classes do WPF, você pode facilmente aplicar esses comportamentos sem escrever CSS manualmente, garantindo consistência e praticidade no design. ### Classes Disponíveis - `t-nowrap`: Impede que o texto quebre em várias linhas, exibindo-o em uma única linha contínua. Útil para títulos ou textos que devem permanecer compactos, mas pode gerar overflow se o conteúdo for maior que o contêiner. - `t-wrap`: Permite que o texto quebre em linhas de forma natural, conforme o espaço disponível e as regras de quebra de palavras do navegador. - `t-wrap-auto`: Deixa o navegador escolher o modo de quebra mais adequado. - `t-wrap-balance`: Distribui o texto de forma equilibrada entre as linhas, ideal para parágrafos curtos. - `t-wrap-stable`: Garante consistência no layout durante a renderização, evitando mudanças bruscas. - `t-wrap-pretty`: Prioriza a legibilidade, ajustando as quebras para um fluxo visual mais agradável. ### Exemplos de Uso #### Exemplo 1: Texto em Linha Única ```html Este texto longo não será quebrado em várias linhas. ``` #### Exemplo 2: Quebra de Linha Padrão ```html

Este texto será quebrado em linhas conforme o espaço disponível no contêiner.

``` #### Exemplo 3: Modos Específicos ```html

Este parágrafo será balanceado para linhas de tamanhos similares.

Este texto é ajustado para melhor legibilidade e fluidez.

``` ### Dicas e Notas

**Overflow**: Use `t-nowrap` com classes de overflow (ex.: `overflow-hidden`) para gerenciar texto que ultrapassa o contêiner.

**Compatibilidade**: Modos como *balance* e *pretty* podem não ser suportados em navegadores antigos. Teste em seu ambiente alvo.

# Word-Wrap As classes utilitárias de `word-wrap` no **WPF** são usadas para controlar o comportamento de quebra de palavras em elementos HTML, aplicando a propriedade CSS `word-wrap`. Elas ajudam a gerenciar textos longos em contêineres com largura limitada. ### Classes Disponíveis - `w-nowrap`: Impede a quebra de palavras, mantendo o texto em uma única linha. Se o texto for muito longo, ele pode ultrapassar os limites do contêiner, **resultando em overflow**. - `w-wrap`: Permite que palavras longas sejam quebradas em pontos arbitrários, ajustando o texto ao tamanho do contêiner e **evitando overflow**. ### Exemplos de Uso #### Exemplo 1: Impedir Quebra de Palavras ```html

Supercalifragilisticexpialidocious

``` #### Exemplo 2: Permitir Quebra de Palavras ```html

Supercalifragilisticexpialidocious

``` # Line-Height As classes utilitárias de `line-height` no **WPF** permitem ajustar a altura das linhas de texto de forma rápida e consistente. Elas controlam o espaçamento entre linhas, melhorando a legibilidade e a estética do texto em parágrafos, títulos e outros elementos. ### Como Funcionam as Classes de Line Height As classes seguem o padrão **lh-\[valor\]\[unidade\]**, onde: - **\[valor\]** é um número (*inteiro* ou *decimal*) que **define o tamanho da altura da linha**. - **\[unidade\]** é uma unidade de medida obrigatória: `px`, `rem`, `em` ou `%`. ### Regras CSS Geradas Cada classe é convertida para a propriedade CSS `line-height`. Por exemplo: - `lh-20px` → `line-height: 20px`; - `lh-1.5rem` → `line-height: 1.5rem`; - `lh-150%` → `line-height: 150%`; ### Como Usar Aplique as classes diretamente aos elementos HTML, como `

`, `

centerPosition-1341d6473c9981ed984acc6c75d5b8ce?pvs=21) via classe com a função `center()`. # Transbordamento As classes de overflow são utilizadas para definir o comportamento de overflow (transbordamento) de conteúdo para um elemento. Elas oferecem opções para controlar o comportamento de overflow em várias direções. ### Uso Geral: ```html

``` ### Opções Disponíveis: - `.overflow`: - Aplica `overflow: auto !important;` para habilitar barras de rolagem quando necessário. - `.overflow-hidden`: - Aplica `overflow: hidden !important;` para ocultar o conteúdo que ultrapassa os limites do elemento. - `.overflow-scroll`: - Aplica `overflow: scroll !important;` para exibir barras de rolagem, independentemente se o conteúdo ultrapassa os limites ou não. - `.overflow-visible`: - Aplica `overflow: visible !important;` para exibir todo o conteúdo, mesmo que ele ultrapasse os limites do elemento. ### Opções de Direção: As classes também oferecem opções para controlar o comportamento de overflow em direções específicas: vertical e horizontal. - `.overflow-y`: - Aplica `overflow-y: auto !important;` para habilitar barras de rolagem vertical quando necessário. - `.overflow-y-hidden`: - Aplica `overflow-y: hidden !important;` para ocultar o conteúdo que ultrapassa os limites verticalmente. - `.overflow-y-scroll`: - Aplica `overflow-y: scroll !important;` para exibir barras de rolagem vertical, independentemente se o conteúdo ultrapassa os limites ou não. - `.overflow-y-visible`: - Aplica `overflow-y: visible !important;` para exibir todo o conteúdo verticalmente, mesmo que ele ultrapasse os limites do elemento. - `.overflow-x`: - Aplica `overflow-x: auto !important;` para habilitar barras de rolagem horizontal quando necessário. - `.overflow-x-hidden`: - Aplica `overflow-x: hidden !important;` para ocultar o conteúdo que ultrapassa os limites horizontalmente. - `.overflow-x-scroll`: - Aplica `overflow-x: scroll !important;` para exibir barras de rolagem horizontal, independentemente se o conteúdo ultrapassa os limites ou não. - `.overflow-x-visible`: - Aplica `overflow-x: visible !important;` para exibir todo o conteúdo horizontalmente, mesmo que ele ultrapasse os limites do elemento.

Classes Utilitárias	Comportamento
`t-underline`	Adiciona um sublinhado sólido* ao texto.*
`t-dashed`	Adiciona um sublinhado tracejado* ao texto.*
`t-double`	Adiciona um sublinhado* duplo ao texto.*
`t-line-through`	Adiciona um tachado* ao texto.*
`t-overline`	Adiciona uma linha sobre* o texto.*
`t-solid`	Adiciona um sublinhado sólido* (similar a* `underline`, mas pode ser usado para consistência).
`t-wavy`	Adiciona um sublinhado ondulado* ao texto.*
`t-none`	*Remove qualquer decoração de texto.*