Skip to main content

Sizing

  • width
  • height

width​

w-<number>	//width:calc(var(--spacing)*number)
w-<fraction>	//width:calc(fraction * 100%);
w-auto		//width:auto;
w-[80px]	//width:80px;
w-full 		//width:100%;
w-screen	//width:100vw;
w-min		//width:min-content;
w-max		//width:max-content;
w-fit		//width:fit-content;

example:
w-[10px]	//exactly 10px

height​

h-<number>	//height:calc(var(--spacing)*number)
h-<fraction>	//height:calc(fraction * 100%);
h-auto		//height:auto;
h-[80px]	//height:80px;
h-full 		//height:100%;
h-screen	//height:100vh;
h-min		//height:min-content;
h-max		//height:max-content;
h-fit		//height:fit-content;