tailwind sizes

Add Answer

ABDELLATIF ANAFLOUS answered on December 18, 2020 Popularity 10/10 Helpfulness 2/10

answer tailwind sizes

related tailwind width

related scale tailwindcss

related tailwind text size

related tailwind different screen sizes

related tailwind width

tailwind sizes

Comment

w-0	width: 0px;
w-px	width: 1px;
w-0.5	width: 0.125rem; /* 2px */
w-1	width: 0.25rem; /* 4px */
w-1.5	width: 0.375rem; /* 6px */
w-2	width: 0.5rem; /* 8px */
w-2.5	width: 0.625rem; /* 10px */
w-3	width: 0.75rem; /* 12px */
w-3.5	width: 0.875rem; /* 14px */
w-4	width: 1rem; /* 16px */
w-5	width: 1.25rem; /* 20px */
w-6	width: 1.5rem; /* 24px */
w-7	width: 1.75rem; /* 28px */
w-8	width: 2rem; /* 32px */
w-9	width: 2.25rem; /* 36px */
w-10	width: 2.5rem; /* 40px */
w-11	width: 2.75rem; /* 44px */
w-12	width: 3rem; /* 48px */
w-14	width: 3.5rem; /* 56px */
w-16	width: 4rem; /* 64px */
w-20	width: 5rem; /* 80px */
w-24	width: 6rem; /* 96px */
w-28	width: 7rem; /* 112px */
w-32	width: 8rem; /* 128px */
w-36	width: 9rem; /* 144px */
w-40	width: 10rem; /* 160px */
w-44	width: 11rem; /* 176px */
w-48	width: 12rem; /* 192px */
w-52	width: 13rem; /* 208px */
w-56	width: 14rem; /* 224px */
w-60	width: 15rem; /* 240px */
w-64	width: 16rem; /* 256px */
w-72	width: 18rem; /* 288px */
w-80	width: 20rem; /* 320px */
w-96	width: 24rem; /* 384px */
w-auto	width: auto;
w-1/2	width: 50%;
w-1/3	width: 33.333333%;
w-2/3	width: 66.666667%;
w-1/4	width: 25%;
w-2/4	width: 50%;
w-3/4	width: 75%;
w-1/5	width: 20%;
w-2/5	width: 40%;
w-3/5	width: 60%;
w-4/5	width: 80%;
w-1/6	width: 16.666667%;
w-2/6	width: 33.333333%;
w-3/6	width: 50%;
w-4/6	width: 66.666667%;
w-5/6	width: 83.333333%;
w-1/12	width: 8.333333%;
w-2/12	width: 16.666667%;
w-3/12	width: 25%;
w-4/12	width: 33.333333%;
w-5/12	width: 41.666667%;
w-6/12	width: 50%;
w-7/12	width: 58.333333%;
w-8/12	width: 66.666667%;
w-9/12	width: 75%;
w-10/12	width: 83.333333%;
w-11/12	width: 91.666667%;
w-full	width: 100%;
w-screen	width: 100vw;
w-min	width: min-content;
w-max	width: max-content;
w-fit	width: fit-content;

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: whatever

Link to this answer
Share Copy Link

Contributed on May 05 2022

ABDELLATIF ANAFLOUS

0 Answers Avg Quality 2/10

Closely Related Answers

tailwind width

Comment

class	rem-width			/*pixel width*/

w-0		width: 0px;
w-px	width: 1px;
w-0.5	width: 0.125rem; 	/* 2px */
w-1		width: 0.25rem; 	/* 4px */
w-1.5	width: 0.375rem;    /* 6px */
w-2		width: 0.5rem;  	/* 8px */
w-2.5	width: 0.625rem; 	/* 10px */
w-3		width: 0.75rem; 	/* 12px */
w-3.5	width: 0.875rem;    /* 14px */
w-4		width: 1rem; 		/* 16px */
w-5		width: 1.25rem; 	/* 20px */
w-6		width: 1.5rem; 		/* 24px */
w-7		width: 1.75rem;	    /* 28px */
w-8		width: 2rem; 		/* 32px */
w-9		width: 2.25rem;	    /* 36px */
w-10	width: 2.5rem;  	/* 40px */
w-11	width: 2.75rem;  	/* 44px */
w-12	width: 3rem;  		/* 48px */
w-14	width: 3.5rem; 	    /* 56px */
w-16	width: 4rem; 		/* 64px */
w-20	width: 5rem; 		/* 80px */
w-24	width: 6rem; 		/* 96px */
w-28	width: 7rem; 		/* 112px */
w-32	width: 8rem; 		/* 128px */
w-36	width: 9rem; 		/* 144px */
w-40	width: 10rem; 		/* 160px */
w-44	width: 11rem;	    /* 176px */
w-48	width: 12rem; 		/* 192px */
w-52	width: 13rem; 		/* 208px */
w-56	width: 14rem;	    /* 224px */
w-60	width: 15rem; 		/* 240px */
w-64	width: 16rem; 		/* 256px */
w-72	width: 18rem;	    /* 288px */
w-80	width: 20rem;	    /* 320px */
w-96	width: 24rem;	    /* 384px */
w-auto	width: auto;
w-1/2	width: 50%;
w-1/3	width: 33.333333%;
w-2/3	width: 66.666667%;
w-1/4	width: 25%;
w-2/4	width: 50%;
w-3/4	width: 75%;
w-1/5	width: 20%;
w-2/5	width: 40%;
w-3/5	width: 60%;
w-4/5	width: 80%;
w-1/6	width: 16.666667%;
w-2/6	width: 33.333333%;
w-3/6	width: 50%;
w-4/6	width: 66.666667%;
w-5/6	width: 83.333333%;
w-1/12	width: 8.333333%;
w-2/12	width: 16.666667%;
w-3/12	width: 25%;
w-4/12	width: 33.333333%;
w-5/12	width: 41.666667%;
w-6/12	width: 50%;
w-7/12	width: 58.333333%;
w-8/12	width: 66.666667%;
w-9/12	width: 75%;
w-10/12	width: 83.333333%;
w-11/12	width: 91.666667%;
w-full	width: 100%;
w-screen	width: 100vw;
w-min	width: min-content;
w-max	width: max-content;
w-fit	width: fit-content;

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Nov 30 2022

Karl-Markus Pihlakas

0 Answers Avg Quality 2/10

scale tailwindcss

Comment

scale-0	transform: scale(0);
scale-x-0	transform: scaleX(0);
scale-y-0	transform: scaleY(0);
scale-50	transform: scale(.5);
scale-x-50	transform: scaleX(.5);
scale-y-50	transform: scaleY(.5);
scale-75	transform: scale(.75);
scale-x-75	transform: scaleX(.75);
scale-y-75	transform: scaleY(.75);
scale-90	transform: scale(.9);
scale-x-90	transform: scaleX(.9);
scale-y-90	transform: scaleY(.9);
scale-95	transform: scale(.95);
scale-x-95	transform: scaleX(.95);
scale-y-95	transform: scaleY(.95);
scale-100	transform: scale(1);
scale-x-100	transform: scaleX(1);
scale-y-100	transform: scaleY(1);
scale-105	transform: scale(1.05);
scale-x-105	transform: scaleX(1.05);
scale-y-105	transform: scaleY(1.05);
scale-110	transform: scale(1.1);
scale-x-110	transform: scaleX(1.1);
scale-y-110	transform: scaleY(1.1);
scale-125	transform: scale(1.25);
scale-x-125	transform: scaleX(1.25);
scale-y-125	transform: scaleY(1.25);
scale-150	transform: scale(1.5);
scale-x-150	transform: scaleX(1.5);
scale-y-150	transform: scaleY(1.5);

Popularity 10/10 Helpfulness 5/10 Language css

Source: tailwindcss.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 13 2022

NNAKWUE KENECHUKWU

0 Answers Avg Quality 2/10

tailwind text size

Comment

<p class="text-xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>
<p class="text-8xl ...">The quick brown fox ...</p>
<p class="text-9xl ...">The quick brown fox ...</p>

Popularity 10/10 Helpfulness 5/10 Language whatever

Source: tailwindcss.com

Tags: text-size text

Link to this answer
Share Copy Link

Contributed on Dec 18 2020

Beautiful Bear

0 Answers Avg Quality 2/10

tailwind different screen sizes

Comment

Small ( sm: )—640 pixels and up.
Medium ( md: )—768 pixels and up.
Large ( lg: )—1024 pixels and up.
Extra large ( xl: )—1280 pixels and up.
Extra extra large ( 2xl: )—1536 pixels and up.

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Dec 04 2022

Tender Toad

0 Answers Avg Quality 2/10

tailwind width

Comment

<div class="w-4"></div> // w-4 = 1rem, w-8 = 2rem
<div class="w-1/2"></div> // w-1/2 = 50% , w-1/3 = 33.333% , w-1/4 = 25%

Popularity 10/10 Helpfulness 2/10 Language html

Source: tailwindcss.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Aug 28 2022

Muneeba Dilawaze

0 Answers Avg Quality 2/10

tailwind sizes

Contents

More Related Answers

tailwind sizes

Closely Related Answers

tailwind width

scale tailwindcss

tailwind text size

tailwind different screen sizes

tailwind width

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.