Tailwind CSS tarjoaa joukon apuluokkia varjojen lisäämiseen elementteihin.

Laatikon varjot

Käytä etuliitettä shadow- ja kokoa ilmaisevaa arvoa lisätäksesi laatikkovarjoja.

Tekstivarjot

Tailwind CSS ei sisällä oletuksena text-shadow-apuohjelmia. Voit kuitenkin helposti lisätä mukautettuja text-shadow-apuohjelmia Tailwindin konfiguraatiotiedostoon tarvittaessa.

Huomio

Jos haluat tutustua tarkemmin Tailwindin varjoihin, katso dokumentaatio: Box Shadow.

Esimerkki

Tässä on käytännön esimerkki perustyylien (värit, reunat, varjot) soveltamisesta hyödyntäen oppimiamme apuohjelmia.

Selitys

1. max-w-sm: Asettaa elementin enimmäisleveydeksi pienen koon (24rem tai 384px);
2. mx-auto: Keskittää elementin vaakasuunnassa asettamalla vasemman ja oikean marginaalin arvoksi auto;
3. p-4: Lisää 1rem (16px) täytteen kaikille reunoille;
4. bg-white: Asettaa taustaväriksi valkoisen;
5. rounded-lg: Lisää suuret pyöristetyt kulmat elementtiin;
6. shadow-md: Lisää keskisuuren laatikkovarjon elementtiin.

1. text-2xl: Asettaa fonttikoon arvoon 2xl (1.5rem tai 24px);
2. font-bold: Ottaa käyttöön lihavoidun fonttipainon;
3. text-gray-900: Asettaa tekstin värin erittäin tummanharmaaksi (lähes musta);
4. mb-2: Lisää alareunaan marginaalin 0.5rem (8px);
5. text-gray-700: Asettaa tekstin värin keskisävyiseksi harmaaksi;
6. mb-4: Lisää alareunaan marginaalin 1rem (16px).

1. border: Lisää reunuksen elementin ympärille;
2. border-blue-500: Asettaa reunuksen väriksi sinisen sävyn;
3. rounded-md: Ottaa käyttöön keskikokoiset pyöristetyt kulmat elementille;
4. p-4: Lisää täytettä 1rem (16px) kaikille puolille;
5. bg-blue-50: Asettaa taustaväriksi erittäin vaalean sinisen;
6. text-blue-700: Asettaa tekstin väriksi tumman sinisen.

1. mt-4: Lisää yläreunaan marginaalin 1rem (16px);
2. p-4: Lisää täytettä 1rem (16px) kaikille puolille;
3. bg-green-100: Asettaa taustaväriksi erittäin vaalean vihreän;
4. border: Lisää reunuksen elementin ympärille;
5. border-green-500: Asettaa reunuksen väriksi vihreän sävyn;
6. rounded: Ottaa käyttöön pienet pyöristetyt kulmat elementille;
7. shadow-sm: Ottaa käyttöön pienen laatikkovarjon elementille;
8. text-green-700: Asettaa tekstin väriksi tumman vihreän.