Como definir o tipo de estilo de lista no Tailwind

Suponha que um usuário precise criar uma lista de itens para sua página da web. Para facilitar o processo de design, o Tailwind fornece várias classes de estilo de lista que podem ser usadas para alterar o tipo, posição e alinhamento dos elementos da lista.

Este artigo fornecerá o procedimento para definir o tipo de estilo de lista no Tailwind.

Como definir o tipo de estilo de lista no Tailwind?

Tailwind fornece três tipos de estilo de lista padrão. Eles são usados ​​para fornecer o “ marcador ”Estilo para itens da lista. As três classes de tipo de estilo de lista padrão são descritas a seguir:

• disco de lista: Esta classe fornecerá marcadores redondos como marcador de lista.
• lista decimal: Esta classe fornecerá os números decimais como marcador de lista.
• lista-nenhuma: Esta classe removerá quaisquer marcadores de lista dos itens.

A sintaxe para usar os tipos de estilo de lista é a seguinte:

Para melhor compreensão, a demonstração fornecida abaixo usará a sintaxe definida acima para fornecer diferentes estilos de marcador para listar itens. Neste exemplo, três elementos de lista serão criados e fornecidos com diferentes estilos de marcador usando as classes de estilo de lista padrão no Tailwind:

A explicação do código acima é a seguinte:

• A '

  ”O elemento é criado com um“ XL ”tamanho da fonte e um“ audacioso ' espessura da fonte. O conteúdo do texto do elemento é posicionado no centro usando o botão “ centro de texto ' aula.

• Após uma quebra de linha, um “
  ”O elemento é criado e é fornecido com um“ flexionar ' aula. Isso criará um contêiner que alinhará os itens filhos horizontalmente.
• O ' justificar-centro ”A classe colocará os itens no centro do contêiner.
• O ' espaço-x-{tamanho} ”A classe fornece o espaço horizontal entre os itens.
• O ' bg-{cor}-{número} ”A classe define o plano de fundo do contêiner para a cor especificada.
• O ' arredondado-lg ”A classe torna os cantos do contêiner arredondados.
• O ' mx-4 ”A classe fornece a margem horizontal para o flex container.
• O ' p-2 ”A classe fornece preenchimento para o contêiner flexível.
• A seguir, três elementos de lista são criados e fornecidos com diferentes tipos de estilo de lista usando o “ lista-{tipo} ' aula.

Saída:

Pela saída abaixo, pode-se observar que a primeira lista usa marcadores, a segunda usa números decimais e a terceira não usa nenhum marcador de item.

Usando a classe de estilo de lista com as variantes de estado no Tailwind

A classe de estilo de lista pode ser usada com as variantes de estado padrão no Tailwind para tornar o design mais dinâmico. Usando as variantes de foco, foco e estado ativo, o usuário pode alterar o estilo do marcador dos itens da lista sempre que o estado especificado for acionado. A sintaxe para usar a classe de estilo de lista com variantes de estado é a seguinte:

Aqui está um exemplo de uso do tipo de estilo de lista com um estado “hover”, onde o usuário pode alterar o estilo do marcador passando o mouse sobre o bloco de lista:

No código acima, a lista é fornecida com o “ disco de lista ”classe como o tipo de estilo de lista padrão. No entanto, usando o “ hover: lista-decimal ”Classe, o tipo de estilo de lista será alterado quando o usuário passar o cursor do mouse sobre o bloco de lista.

Saída:

A saída abaixo mostra que o estilo do tipo de lista muda de uma lista com marcadores para uma lista numerada quando o cursor passa sobre o bloco de lista.

Usando a classe de estilo de lista com os pontos de interrupção no Tailwind

Os pontos de interrupção são usados ​​para design responsivo do layout para diferentes tamanhos de tela. Os cinco pontos de interrupção padrão fornecidos pelo Tailwind são sm, md, lg, xl e 2xl. A sintaxe a seguir é usada para fornecer um ponto de interrupção à classe de estilo do tipo de lista:

Aqui está um exemplo de uso do tipo de estilo de lista com um “ médico ” ponto de interrupção, onde o estilo do marcador mudará quando o tamanho da tela atingir o ponto de interrupção “md”:

No código acima, a lista é fornecida com o “ disco de lista ”classe como o estilo padrão. No entanto, usando o “ md: lista-decimal ”classe o tipo de estilo de lista mudará para o tamanho da tela “md”.

Saída:

Como você pode ver na saída abaixo, o tipo de estilo de lista muda de disco para decimal quando o tamanho da tela atinge “ médico ”ponto de interrupção.

Trata-se de definir o tipo de estilo de lista no Tailwind.

Conclusão

Tailwind fornece três classes de tipo de estilo de lista predefinidas para alterar o estilo de listagem de um elemento. O ' disco de lista ”A classe fornece os marcadores para listar os itens. O ' lista decimal ”A classe fornece os números para listar os itens. O ' lista-nenhuma ”A classe cria uma lista que não usa nenhum marcador de item. Este artigo forneceu o procedimento para definir o tipo de estilo de lista no Tailwind.