Tailwind CSS

Tailwind CSS

Display

• box sizing

  <div className="box-border h-32 w-32 p-4 border-4 ...">
    <!-- ... -->
  </div>
  

  Class	Properties
  box-border	box-sizing: border-box;
  box-content	box-sizing: content-box;

• display

  <div>
    When controlling the flow of text, using the CSS property
    <span className="inline">display: inline</span>
    will cause the text inside the element to wrap normally.
  
    While using the property <span className="inline-block">display: inline-block</span>
    will wrap the element to prevent the text inside from extending beyond its parent.
  
    Lastly, using the property <span className="block">display: block</span>
    will put the element on its own line and fill its parent.
  </div>

  Class	Properties
  block	display: block;
  inline-block	display: inline-block;
  inline	display: inline;
  flex	display: flex;
  inline-flex	display: inline-flex;
  grid	display: grid;

---

Flexbox

• flex

  <div className="flex">
  	<div className="flex-none">
  		01
  	</div>
  	<div className="flex-auto">
  		02
  	</div>
  	<div className="flex-auto">
  		03
  	</div>
  </div>

  Class	Properties
  flex-1	flex: 1 1 0%;
  flex-auto	flex: 1 1 auto;
  flex-initial	flex: 0 1 auto;
  flex-none	flex: none;

• justify content

// justify-{alignment}
<div className="flex justify-center">
	<div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Class	Properties
justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-stretch	justify-content: stretch;

• align content

// content-{}
<div className="h-56 grid grid-cols-3 gap-4 content-center">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Class	Properties
content-normal	align-content: normal;
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-stretch	align-content: stretch;

• align items

// items-{}
<div className="flex items-center">
  <div className="py-4">01</div>
  <div className="py-12">02</div>
  <div className="py-8">03</div>
</div>

Class	Properties
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

---

Backgrounds

• background color

  // bg-{color}
  <div className="bg-indigo-500">background color</div>

  Class	Properties
  bg-inherit	background-color: inherit;
  bg-transparent	background-color: transparent;
  bg-black	background-color: rgb(0 0 0);
  bg-white	background-color: rgb(255 255 255);

---

Borders

• border radius

  // rounded-{}
  <div className="rounded">border radius</div>

  Class	Properties
  rounded-none	border-radius: 0px;
  rounded-sm	border-radius: 0.125rem; / 2px /
  rounded	border-radius: 0.25rem; / 4px /
  rounded-md	border-radius: 0.375rem; / 6px /
  rounded-lg	border-radius: 0.5rem; / 8px /
  rounded-full	border-radius: 9999px;

• border style

  // border-{style}
  <div className="border-solid">border style</div>

  Class	Properties
  border-solid	border-style: solid;
  border-dashed	border-style: dashed;
  border-dotted	border-style: dotted;
  border-double	border-style: double;
  border-hidden	border-style: hidden;
  border-none	border-style: none;

---

Interactivity

• cursor

//cursor
<button type="button" className="cursor-pointer">
  Submit
</button>

Class	Properties
cursor-auto	cursor: auto;
cursor-default	cursor: default;
cursor-pointer	cursor: pointer;