Tailwind Divide Style – um guia completo
Neste artigo, discutiremos a propriedade Tailwind Divide Style , como usá-la e como ela pode ajudá-lo a criar interfaces da Web visualmente atraentes.
O estilo de divisão Tailwind permite adicionar uma linha divisória ou borda entre os elementos filho de um contêiner.
Por padrão, os divisores têm um estilo de linha sólida, mas com Tailwind Divide Style , você pode personalizar o estilo do divisor/borda para obter um efeito mais sutil ou dramático.
Essa classe aceita muito valor ao expor todas as propriedades em um formulário de classe.
Sintaxe
A sintaxe para usar o utilitário Divide Style é muito simples.
Para criar uma divisória com um estilo particular, basta adicionar a classe “divide-style” seguida de um valor que defina o estilo da divisória.
<element class="divide-{style}">....</element>
Para adicionar um divisor com um estilo de linha pontilhada , você usaria o seguinte código:
<element class="divide-style-dotted"></element>
Classes de estilo Tailwind Divide
| Aulas | Visão geral |
| sólido dividido | Esta classe representa o divisor usando uma linha sólida. |
| traço-dividido | Uma linha tracejada é usada para representar o divisor. |
| pontilhado dividido | O divisor é representado por uma linha pontilhada. |
| divide-dobro | Duas linhas paralelas são usadas para representar o divisor. |
| dividir-nenhum | Esta classe remove os divisores de um elemento. |
O exemplo a seguir utiliza as classes divide-solid , divide-dashed e divide-double no Tailwind CSS:
Example:
O exemplo que veremos irá demonstrar o uso das classes divide-dotted e divide-none no Tailwind CSS :
Example:
