Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Aplicando Classes Utilitárias em HTML | Conceitos Fundamentais e Estilização Básica
Tailwind CSS para Desenvolvimento Web

bookAplicando Classes Utilitárias em HTML

Para utilizar classes utilitárias no Tailwind CSS, adicione-as ao atributo class dos elementos HTML. Cada classe corresponde a uma regra CSS específica, facilitando a compreensão e o gerenciamento dos estilos diretamente no HTML.

Estrutura HTML

Comece com uma estrutura HTML básica.

index.html

index.html

copy

Aplicação de Classes Utilitárias

Adição de classes utilitárias ao atributo class dos elementos para estilização.

index.html

index.html

copy

Explicação

  1. p-4: Adiciona espaçamento interno;
  2. bg-gray-100: Define a cor de fundo como cinza claro;
  3. rounded-lg: Adiciona cantos arredondados grandes;
  4. shadow-md: Adiciona uma sombra média.
  1. h-16: Define a altura;
  2. w-16: Define a largura;
  3. rounded-full: Deixa a imagem circular;
  4. mx-auto: Centraliza a imagem horizontalmente.
  1. text-center: Centraliza o texto;
  2. mt-4: Adiciona margem superior;
  3. text-lg: Define o tamanho da fonte;
  4. font-semibold: Deixa o texto seminegrito;
  5. text-gray-500: Define a cor do texto como cinza.
  1. mt-4: Adiciona margem superior;
  2. px-4: Adiciona preenchimento horizontal;
  3. py-2: Adiciona preenchimento vertical;
  4. bg-blue-500: Define a cor de fundo como azul;
  5. text-white: Define a cor do texto como branco;
  6. rounded: Adiciona cantos levemente arredondados;
  7. hover:bg-blue-700: Altera a cor de fundo ao passar o mouse.
question mark

Como aplicar classes utilitárias a um elemento HTML no Tailwind CSS?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain what each utility class does in more detail?

How do I combine multiple utility classes for one element?

Can you show an example of how these classes look in the HTML code?

Awesome!

Completion rate improved to 3.57

bookAplicando Classes Utilitárias em HTML

Deslize para mostrar o menu

Para utilizar classes utilitárias no Tailwind CSS, adicione-as ao atributo class dos elementos HTML. Cada classe corresponde a uma regra CSS específica, facilitando a compreensão e o gerenciamento dos estilos diretamente no HTML.

Estrutura HTML

Comece com uma estrutura HTML básica.

index.html

index.html

copy

Aplicação de Classes Utilitárias

Adição de classes utilitárias ao atributo class dos elementos para estilização.

index.html

index.html

copy

Explicação

  1. p-4: Adiciona espaçamento interno;
  2. bg-gray-100: Define a cor de fundo como cinza claro;
  3. rounded-lg: Adiciona cantos arredondados grandes;
  4. shadow-md: Adiciona uma sombra média.
  1. h-16: Define a altura;
  2. w-16: Define a largura;
  3. rounded-full: Deixa a imagem circular;
  4. mx-auto: Centraliza a imagem horizontalmente.
  1. text-center: Centraliza o texto;
  2. mt-4: Adiciona margem superior;
  3. text-lg: Define o tamanho da fonte;
  4. font-semibold: Deixa o texto seminegrito;
  5. text-gray-500: Define a cor do texto como cinza.
  1. mt-4: Adiciona margem superior;
  2. px-4: Adiciona preenchimento horizontal;
  3. py-2: Adiciona preenchimento vertical;
  4. bg-blue-500: Define a cor de fundo como azul;
  5. text-white: Define a cor do texto como branco;
  6. rounded: Adiciona cantos levemente arredondados;
  7. hover:bg-blue-700: Altera a cor de fundo ao passar o mouse.
question mark

Como aplicar classes utilitárias a um elemento HTML no Tailwind CSS?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 2
some-alt