Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Lägga till skuggor för djup och kontrast | Grundläggande Koncept och Baskonfiguration
Tailwind CSS för webbutveckling

bookLägga till skuggor för djup och kontrast

Tailwind CSS erbjuder ett antal verktyg för att lägga till skuggor på element.

Boxskuggor

Använd prefixet shadow- följt av storleksvärdet för att lägga till boxskuggor.

index.html

index.html

copy

Textskuggor

Tailwind CSS inkluderar inte text-shadow-verktyg som standard. Du kan dock enkelt lägga till egna text-shadow-verktyg i din Tailwind-konfigurationsfil vid behov.

Obs

För att fördjupa dig i specifika Tailwind-skuggor, se dokumentationen: Box Shadow.

Exempel

Här är ett praktiskt exempel på hur du använder grundläggande styling (färger, ramar, skuggor) med hjälp av de verktyg vi har gått igenom.

index.html

index.html

copy

Förklaring

  1. max-w-sm: Anger maximal bredd på elementet till liten storlek (24rem eller 384px);
  2. mx-auto: Centrerar elementet horisontellt genom att använda auto marginaler till vänster och höger;
  3. p-4: Lägger till en padding på 1rem (16px) på alla sidor;
  4. bg-white: Sätter bakgrundsfärgen till vit;
  5. rounded-lg: Applicerar stora rundade hörn på elementet;
  6. shadow-md: Applicerar en medelstor skugga på elementet.
  1. text-2xl: Anger teckenstorleken till 2xl (1.5rem eller 24px);
  2. font-bold: Tillämpas fet teckenvikt;
  3. text-gray-900: Anger textfärgen till en mycket mörkgrå (nästan svart);
  4. mb-2: Lägger till en nederkantmarginal på 0.5rem (8px);
  5. text-gray-700: Anger textfärgen till en mellangrå nyans;
  6. mb-4: Lägger till en nederkantmarginal på 1rem (16px).
  1. border: Lägger till en kantlinje runt elementet;
  2. border-blue-500: Anger kantlinjens färg till en blå nyans;
  3. rounded-md: Tillämpas medelstora rundade hörn på elementet;
  4. p-4: Lägger till en fyllnad på 1rem (16px) på alla sidor;
  5. bg-blue-50: Anger bakgrundsfärgen till en mycket ljusblå nyans;
  6. text-blue-700: Anger textfärgen till en mörkblå nyans.
  1. mt-4: Lägger till en överkantmarginal på 1rem (16px);
  2. p-4: Lägger till en fyllnad på 1rem (16px) på alla sidor;
  3. bg-green-100: Anger bakgrundsfärgen till en mycket ljusgrön nyans;
  4. border: Lägger till en kantlinje runt elementet;
  5. border-green-500: Anger kantlinjens färg till en grön nyans;
  6. rounded: Tillämpas små rundade hörn på elementet;
  7. shadow-sm: Tillämpas en liten skugga på elementet;
  8. text-green-700: Anger textfärgen till en mörkgrön nyans.
question mark

Vilken klass används för att lägga till en medelstor skugga på ett element?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 5

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain how to add custom text-shadow utilities in Tailwind?

What are the different box shadow sizes available in Tailwind?

Can you break down the example code for these styles?

Awesome!

Completion rate improved to 3.57

bookLägga till skuggor för djup och kontrast

Svep för att visa menyn

Tailwind CSS erbjuder ett antal verktyg för att lägga till skuggor på element.

Boxskuggor

Använd prefixet shadow- följt av storleksvärdet för att lägga till boxskuggor.

index.html

index.html

copy

Textskuggor

Tailwind CSS inkluderar inte text-shadow-verktyg som standard. Du kan dock enkelt lägga till egna text-shadow-verktyg i din Tailwind-konfigurationsfil vid behov.

Obs

För att fördjupa dig i specifika Tailwind-skuggor, se dokumentationen: Box Shadow.

Exempel

Här är ett praktiskt exempel på hur du använder grundläggande styling (färger, ramar, skuggor) med hjälp av de verktyg vi har gått igenom.

index.html

index.html

copy

Förklaring

  1. max-w-sm: Anger maximal bredd på elementet till liten storlek (24rem eller 384px);
  2. mx-auto: Centrerar elementet horisontellt genom att använda auto marginaler till vänster och höger;
  3. p-4: Lägger till en padding på 1rem (16px) på alla sidor;
  4. bg-white: Sätter bakgrundsfärgen till vit;
  5. rounded-lg: Applicerar stora rundade hörn på elementet;
  6. shadow-md: Applicerar en medelstor skugga på elementet.
  1. text-2xl: Anger teckenstorleken till 2xl (1.5rem eller 24px);
  2. font-bold: Tillämpas fet teckenvikt;
  3. text-gray-900: Anger textfärgen till en mycket mörkgrå (nästan svart);
  4. mb-2: Lägger till en nederkantmarginal på 0.5rem (8px);
  5. text-gray-700: Anger textfärgen till en mellangrå nyans;
  6. mb-4: Lägger till en nederkantmarginal på 1rem (16px).
  1. border: Lägger till en kantlinje runt elementet;
  2. border-blue-500: Anger kantlinjens färg till en blå nyans;
  3. rounded-md: Tillämpas medelstora rundade hörn på elementet;
  4. p-4: Lägger till en fyllnad på 1rem (16px) på alla sidor;
  5. bg-blue-50: Anger bakgrundsfärgen till en mycket ljusblå nyans;
  6. text-blue-700: Anger textfärgen till en mörkblå nyans.
  1. mt-4: Lägger till en överkantmarginal på 1rem (16px);
  2. p-4: Lägger till en fyllnad på 1rem (16px) på alla sidor;
  3. bg-green-100: Anger bakgrundsfärgen till en mycket ljusgrön nyans;
  4. border: Lägger till en kantlinje runt elementet;
  5. border-green-500: Anger kantlinjens färg till en grön nyans;
  6. rounded: Tillämpas små rundade hörn på elementet;
  7. shadow-sm: Tillämpas en liten skugga på elementet;
  8. text-green-700: Anger textfärgen till en mörkgrön nyans.
question mark

Vilken klass används för att lägga till en medelstor skugga på ett element?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 5
some-alt