Använda Brytpunkter för Responsiv Design i Tailwind CSS

Tailwind CSS gör det enkelt att skapa responsiva designer genom att erbjuda hjälparklasser för brytpunkter och mediefrågor.

Brytpunkter

Brytpunkter i Tailwind CSS definieras vid specifika skärmstorlekar, vilket gör det möjligt att tillämpa olika stilar vid olika vyportsbredder.

Standardbrytpunkter

Dessa brytpunkter kan användas som prefix för att villkorligt tillämpa stilar baserat på vyportens bredd.

Förklaring

1. bg-blue-500: Ställer in bakgrundsfärgen till en blå nyans som standard;
2. p-4: Lägger till en utfyllnad på 1rem (16px) på alla sidor;
3. sm:bg-green-500: Ställer in bakgrundsfärgen till en grön nyans på små skärmar och större (min-width: 640px);
4. md:bg-red-500: Ställer in bakgrundsfärgen till en röd nyans på medelstora skärmar och större (min-width: 768px);
5. lg:bg-yellow-500: Ställer in bakgrundsfärgen till en gul nyans på stora skärmar och större (min-width: 1024px);
6. xl:bg-purple-500: Ställer in bakgrundsfärgen till en lila nyans på extra stora skärmar och större (min-width: 1280px).

Tillämpning av responsiva stilar

Responsiva stilar kan tillämpas på valfri hjälparklass i Tailwind CSS genom att lägga till ett prefix med en brytpunkt.

Förklaring

Padding:

1. p-4: Lägger till en utfyllnad på 1rem (16px) på alla sidor som standard;
2. sm:p-6: Lägger till en utfyllnad på 1,5rem (24px) på alla sidor för små skärmar och större (min-width: 640px);
3. md:p-8: Lägger till en utfyllnad på 2rem (32px) på alla sidor för medelstora skärmar och större (min-width: 768px);
4. lg:p-10: Lägger till en utfyllnad på 2,5rem (40px) på alla sidor för stora skärmar och större (min-width: 1024px);
5. xl:p-12: Lägger till en utfyllnad på 3rem (48px) på alla sidor för extra stora skärmar och större (min-width: 1280px).

Textstorlek:

1. sm:text-sm: Anger teckenstorleken till liten (0,875rem eller 14px) för små skärmar och större (min-width: 640px);
2. md:text-base: Anger teckenstorleken till bas (1rem eller 16px) för medelstora skärmar och större (min-width: 768px);
3. lg:text-lg: Anger teckenstorleken till stor (1,125rem eller 18px) för stora skärmar och större (min-width: 1024px);
4. xl:text-xl: Anger teckenstorleken till extra stor (1,25rem eller 20px) för extra stora skärmar och större (min-width: 1280px).

Teckensnittsvikt:

1. sm:font-light: Tillämpas lätt teckensnittsvikt för små skärmar och större (min-width: 640px);
2. md:font-normal: Tillämpas normal teckensnittsvikt för medelstora skärmar och större (min-width: 768px);
3. lg:font-semibold: Tillämpas halvfet teckensnittsvikt för stora skärmar och större (min-width: 1024px);
4. xl:font-bold: Tillämpas fet teckensnittsvikt för extra stora skärmar och större (min-width: 1280px).

Obs

Söker du specifik information om responsivitet? Se följande länk.