Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Anvendelse af Utility-klasser i HTML | Kernekoncepter og Grundlæggende Styling
Tailwind CSS til Webudvikling

bookAnvendelse af Utility-klasser i HTML

For at anvende utility-klasser i Tailwind CSS, tilføjes de til class-attributten på dine HTML-elementer. Hver klasse svarer til en specifik CSS-regel, hvilket gør det nemt at forstå og administrere dine stilarter direkte i HTML'en.

HTML-struktur

Start med en grundlæggende HTML-struktur.

index.html

index.html

copy

Anvendelse af hjælpeklasser

Tilføjelse af hjælpeklasser til class-attributten på dine elementer for at style dem.

index.html

index.html

copy

Forklaring

  1. p-4: Tilføjer polstring;
  2. bg-gray-100: Indstiller baggrundsfarven til lysegrå;
  3. rounded-lg: Tilføjer store afrundede hjørner;
  4. shadow-md: Tilføjer en medium skygge.
  1. h-16: Indstiller højden;
  2. w-16: Indstiller bredden;
  3. rounded-full: Gør billedet cirkulært;
  4. mx-auto: Centrerer billedet horisontalt.
  1. text-center: Centrerer teksten;
  2. mt-4: Tilføjer øverste margin;
  3. text-lg: Angiver skriftstørrelsen;
  4. font-semibold: Gør teksten halvfed;
  5. text-gray-500: Angiver tekstfarven til grå.
  1. mt-4: Tilføjer øverste margin;
  2. px-4: Tilføjer horisontal polstring;
  3. py-2: Tilføjer vertikal polstring;
  4. bg-blue-500: Angiver baggrundsfarven til blå;
  5. text-white: Angiver tekstfarven til hvid;
  6. rounded: Tilføjer små afrundede hjørner;
  7. hover:bg-blue-700: Ændrer baggrundsfarven ved hover.
question mark

Hvordan anvender du utility-klasser på et HTML-element i Tailwind CSS?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

bookAnvendelse af Utility-klasser i HTML

Stryg for at vise menuen

For at anvende utility-klasser i Tailwind CSS, tilføjes de til class-attributten på dine HTML-elementer. Hver klasse svarer til en specifik CSS-regel, hvilket gør det nemt at forstå og administrere dine stilarter direkte i HTML'en.

HTML-struktur

Start med en grundlæggende HTML-struktur.

index.html

index.html

copy

Anvendelse af hjælpeklasser

Tilføjelse af hjælpeklasser til class-attributten på dine elementer for at style dem.

index.html

index.html

copy

Forklaring

  1. p-4: Tilføjer polstring;
  2. bg-gray-100: Indstiller baggrundsfarven til lysegrå;
  3. rounded-lg: Tilføjer store afrundede hjørner;
  4. shadow-md: Tilføjer en medium skygge.
  1. h-16: Indstiller højden;
  2. w-16: Indstiller bredden;
  3. rounded-full: Gør billedet cirkulært;
  4. mx-auto: Centrerer billedet horisontalt.
  1. text-center: Centrerer teksten;
  2. mt-4: Tilføjer øverste margin;
  3. text-lg: Angiver skriftstørrelsen;
  4. font-semibold: Gør teksten halvfed;
  5. text-gray-500: Angiver tekstfarven til grå.
  1. mt-4: Tilføjer øverste margin;
  2. px-4: Tilføjer horisontal polstring;
  3. py-2: Tilføjer vertikal polstring;
  4. bg-blue-500: Angiver baggrundsfarven til blå;
  5. text-white: Angiver tekstfarven til hvid;
  6. rounded: Tilføjer små afrundede hjørner;
  7. hover:bg-blue-700: Ændrer baggrundsfarven ved hover.
question mark

Hvordan anvender du utility-klasser på et HTML-element i Tailwind CSS?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 2
some-alt