No Tailwind, a proporção é a proporção entre a largura e a altura de um elemento, como um vídeo ou uma imagem. Tailwind CSS introduziu suporte nativo para utilitários de proporção de aspecto, que usam a propriedade de proporção de aspecto CSS para definir a proporção desejada para um elemento. No entanto, esta propriedade não é suportada em navegadores mais antigos. Portanto, os usuários podem usar o plugin de proporção de aspecto para oferecer suporte a esses navegadores. Este plugin apresenta duas classes, ou seja, “ aspecto-w-{n} ' e ' aspecto-h-{n} ”, que pode ser combinado para dar a um elemento uma proporção fixa.
Este artigo explicará o método para definir o plugin de proporção de aspecto no Tailwind.
Como definir o plug-in de proporção de aspecto no Tailwind CSS?
Para definir o plugin de proporção de aspecto no Tailwind, observe as etapas fornecidas abaixo:
- Instale o plugin de proporção de aspecto no projeto
- Adicione o plugin de proporção de aspecto no arquivo “tailwind.config.js” e desative o “ aspecto ”plugin principal
- Use as classes de plug-in de proporção de aspecto no programa HTML
- Verifique a saída visualizando a página HTML da web
Etapa 1: instalar o plug-in Aspect Ratio no projeto Tailwind
Primeiro, abra o terminal e execute o comando abaixo para instalar o plugin de proporção de aspecto no projeto:
asl e @ tailwindcss / proporção da tela
Etapa 2: configurar o plug-in de proporção de aspecto no arquivo de configuração do Tailwind
Em seguida, abra o arquivo “tailwind.config.js”, adicione o plugin de proporção de aspecto nele e desative o “ aspecto ”plugin principal para evitar conflitos:
módulo.exportações= {contente: [ './index.html' ] ,
núcleoPlugins: {
proporção da tela: falso ,
} ,
plug-ins: [
exigir ( '@tailwindcss/proporção de aspecto' ) ,
] ,
} ;
Etapa 3: use o plug-in Aspect Ratio no programa HTML
Agora, crie um programa HTML e utilize o plugin de proporção de aspecto nele. Por exemplo, usamos o “ aspecto-w-16 ' e ' aspecto-h-9 ”classes em nosso programa para manter a proporção de 16:9:
< corpo >< divisão aula = 'aspecto-w-16 aspecto-h-9' >
< iframe fonte = 'https://www.youtube.com/embed/NX_NW6bt6_s'
moldura = '0' permitir = 'acelerômetro; reprodução automática;
gravação na área de transferência; mídia criptografada; giroscópio;
imagem em imagem' Permitir tela cheia iframe >
divisão >
corpo >
Aqui:
- O ' ”O elemento está usando duas classes de plug-in de proporção de aspecto, ou seja,“ aspecto-w-16 ' e ' aspecto-h-9 ”. Essas classes são utilizadas para criar um contêiner com proporção fixa de 16:9.
- O '