Lä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.

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.

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.