Tailwind CSS helpottaa responsiivisten käyttöliittymien luomista tarjoamalla apuluokkia taukokohdille (breakpoints) ja media queries -kyselyille.

Taukokohdat

Taukokohdat Tailwind CSS:ssä määritellään tietyille näytön leveyksille, jolloin eri tyylejä voidaan soveltaa eri näkymäleveyksillä.

Oletustaukokohdat

Näitä taukokohtia voidaan käyttää etuliitteinä, jotta tyylejä voidaan soveltaa ehdollisesti näkymän leveyden perusteella.

Selitys

1. bg-blue-500: Asettaa taustavärin sinisen sävyyn oletuksena;
2. p-4: Lisää 1 rem (16px) täytettä kaikille reunoille;
3. sm:bg-green-500: Asettaa taustavärin vihreän sävyyn pienillä ja sitä suuremmilla näytöillä (vähintään 640px leveys);
4. md:bg-red-500: Asettaa taustavärin punaisen sävyyn keskikokoisilla ja sitä suuremmilla näytöillä (vähintään 768px leveys);
5. lg:bg-yellow-500: Asettaa taustavärin keltaisen sävyyn suurilla ja sitä suuremmilla näytöillä (vähintään 1024px leveys);
6. xl:bg-purple-500: Asettaa taustavärin violetin sävyyn erittäin suurilla ja sitä suuremmilla näytöillä (vähintään 1280px leveys).

Responsiivisten tyylien käyttö

Responsiivisia tyylejä voi käyttää missä tahansa apuluokassa Tailwind CSS:ssä lisäämällä etuliitteeksi halutun murtumakohdan.

Selitys

Täyte (Padding):

1. p-4: Lisää täytettä 1rem (16px) kaikille reunoille oletuksena;
2. sm:p-6: Lisää täytettä 1.5rem (24px) kaikille reunoille pienillä näytöillä ja suuremmilla (min-width: 640px);
3. md:p-8: Lisää täytettä 2rem (32px) kaikille reunoille keskikokoisilla näytöillä ja suuremmilla (min-width: 768px);
4. lg:p-10: Lisää täytettä 2.5rem (40px) kaikille reunoille suurilla näytöillä ja suuremmilla (min-width: 1024px);
5. xl:p-12: Lisää täytettä 3rem (48px) kaikille reunoille erittäin suurilla näytöillä ja suuremmilla (min-width: 1280px).

Tekstin koko:

1. sm:text-sm: Asettaa fonttikooksi pieni (0.875rem tai 14px) pienillä näytöillä ja suuremmilla (min-width: 640px);
2. md:text-base: Asettaa fonttikooksi perus (1rem tai 16px) keskikokoisilla näytöillä ja suuremmilla (min-width: 768px);
3. lg:text-lg: Asettaa fonttikooksi suuri (1.125rem tai 18px) suurilla näytöillä ja suuremmilla (min-width: 1024px);
4. xl:text-xl: Asettaa fonttikooksi erittäin suuri (1.25rem tai 20px) erittäin suurilla näytöillä ja suuremmilla (min-width: 1280px).

Fontin paksuus:

1. sm:font-light: Käyttää kevyttä fonttipaksuutta pienillä näytöillä ja suuremmilla (min-width: 640px);
2. md:font-normal: Käyttää normaalia fonttipaksuutta keskikokoisilla näytöillä ja suuremmilla (min-width: 768px);
3. lg:font-semibold: Käyttää puolilihavaa fonttipaksuutta suurilla näytöillä ja suuremmilla (min-width: 1024px);
4. xl:font-bold: Käyttää lihavoitua fonttipaksuutta erittäin suurilla näytöillä ja suuremmilla (min-width: 1280px).

Huomio

Etsitkö tarkempaa tietoa responsiivisuudesta? Katso seuraava linkki.