Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Utilityclasses Toepassen in HTML | Kernconcepten en Basisopmaak
Tailwind CSS voor Webontwikkeling

bookUtilityclasses Toepassen in HTML

Om utility classes in Tailwind CSS te gebruiken, voeg je deze toe aan het class-attribuut van je HTML-elementen. Elke klasse komt overeen met een specifieke CSS-regel, waardoor het eenvoudig is om je stijlen direct in je HTML te begrijpen en te beheren.

HTML-structuur

Begin met een basis HTML-structuur.

index.html

index.html

copy

Hulpprogrammaklassen toepassen

Hulpprogrammaklassen toevoegen aan het class-attribuut van uw elementen om deze te stijlen.

index.html

index.html

copy

Uitleg

  1. p-4: Voegt opvulling toe;
  2. bg-gray-100: Stelt de achtergrondkleur in op lichtgrijs;
  3. rounded-lg: Voegt grote afgeronde hoeken toe;
  4. shadow-md: Voegt een middelgrote schaduw toe.
  1. h-16: Stelt de hoogte in;
  2. w-16: Stelt de breedte in;
  3. rounded-full: Maakt de afbeelding cirkelvormig;
  4. mx-auto: Centreert de afbeelding horizontaal.
  1. text-center: Centreert de tekst;
  2. mt-4: Voegt een bovenmarge toe;
  3. text-lg: Stelt de lettergrootte in;
  4. font-semibold: Maakt de tekst halfvet;
  5. text-gray-500: Stelt de tekstkleur in op grijs.
  1. mt-4: Voegt een bovenmarge toe;
  2. px-4: Voegt horizontale opvulling toe;
  3. py-2: Voegt verticale opvulling toe;
  4. bg-blue-500: Stelt de achtergrondkleur in op blauw;
  5. text-white: Stelt de tekstkleur in op wit;
  6. rounded: Voegt kleine afgeronde hoeken toe;
  7. hover:bg-blue-700: Wijzigt de achtergrondkleur bij hover.
question mark

Hoe pas je utility classes toe op een HTML-element in Tailwind CSS?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

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

bookUtilityclasses Toepassen in HTML

Veeg om het menu te tonen

Om utility classes in Tailwind CSS te gebruiken, voeg je deze toe aan het class-attribuut van je HTML-elementen. Elke klasse komt overeen met een specifieke CSS-regel, waardoor het eenvoudig is om je stijlen direct in je HTML te begrijpen en te beheren.

HTML-structuur

Begin met een basis HTML-structuur.

index.html

index.html

copy

Hulpprogrammaklassen toepassen

Hulpprogrammaklassen toevoegen aan het class-attribuut van uw elementen om deze te stijlen.

index.html

index.html

copy

Uitleg

  1. p-4: Voegt opvulling toe;
  2. bg-gray-100: Stelt de achtergrondkleur in op lichtgrijs;
  3. rounded-lg: Voegt grote afgeronde hoeken toe;
  4. shadow-md: Voegt een middelgrote schaduw toe.
  1. h-16: Stelt de hoogte in;
  2. w-16: Stelt de breedte in;
  3. rounded-full: Maakt de afbeelding cirkelvormig;
  4. mx-auto: Centreert de afbeelding horizontaal.
  1. text-center: Centreert de tekst;
  2. mt-4: Voegt een bovenmarge toe;
  3. text-lg: Stelt de lettergrootte in;
  4. font-semibold: Maakt de tekst halfvet;
  5. text-gray-500: Stelt de tekstkleur in op grijs.
  1. mt-4: Voegt een bovenmarge toe;
  2. px-4: Voegt horizontale opvulling toe;
  3. py-2: Voegt verticale opvulling toe;
  4. bg-blue-500: Stelt de achtergrondkleur in op blauw;
  5. text-white: Stelt de tekstkleur in op wit;
  6. rounded: Voegt kleine afgeronde hoeken toe;
  7. hover:bg-blue-700: Wijzigt de achtergrondkleur bij hover.
question mark

Hoe pas je utility classes toe op een HTML-element in Tailwind CSS?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2
some-alt