Breaking News: Grepper is joining You.com. Read the official announcement!

tailwind different screen sizes

Add Answer

Tender Toad answered on May 5, 2022 Popularity 10/10 Helpfulness 4/10

answer tailwind different screen sizes

related tailwind show size of screen

related tailwind sizes

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

Link to this answer
Share Copy Link

Contributed on Dec 04 2022

Tender Toad

0 Answers Avg Quality 2/10

Closely Related Answers

tailwind show size of screen

Comment

// 1-run this command
npm install tailwindcss-debug-screens

// 2-inside tailwind.config.js add the following
plugins: [
    require('tailwindcss-debug-screens'),
],

// 3-add "debug-screens" className to the root element of each page
// so that you can see the size of the screen showing up in left bottom corner
// of the page

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: detect de

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Sakar Hamasaeed

0 Answers Avg Quality 2/10

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 whateve

Link to this answer
Share Copy Link

Contributed on May 05 2022

ABDELLATIF ANAFLOUS

0 Answers Avg Quality 2/10

tailwind different screen sizes

Contents

More Related Answers

tailwind different screen sizes

Closely Related Answers

tailwind show size of screen

tailwind sizes

Grepper

Documentation

Social

Legal

Contact

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