Tailwind CSSでよく使うもの

Tailwind CSS(テイルウィンドシーエスエス)で個人的に使う頻度が高いものを抜粋

・p-シリーズ(padding)

tail	css
p-8	padding:32px;
pt-8	padding-top:32px;
pl-8	padding-left:32px;
pr-8	padding-right:32px;
pb-8	padding-bottom:32px;

・m-シリーズ(margin)

tail	css
m-8	margin:32px;
mt-8	margint-top:32px;
ml-8	margin-left:32px;
mr-8	margin-right:32px;
mb-8	margin-bottom:32px;

・roundedシリーズ(border-radius)

tail	css
rounded-tl-2xl	border-top-left-radius: 16px;
rounded-tr-2xl	border-top-right-radius: 16px;
rounded-bl-2xl	border-bottom-left-radius: 16px;
rounded-br-2xl	border-bottom-right-radius: 16px;

・shadowシリーズ(box-shadow)

tail	css
shadow-2xl	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

・w-シリーズ(width)

tail	css
w-8	width:32px;

・h-シリーズ(height)

tail	css
h-8	height:32px;

・bg-color-シリーズ(background-color)

tail	css
bg-red-600	background-color: rgb(220 38 38);

・opacityシリーズ(opacity)

tail	css
opacity-40	opacity: 0.4;

・displayシリーズ(display)

tail	css
flex	display:flex;
inline-block	display:inline-block;

・positionシリーズ(position)

tail	css
relative	position:relative;
absolute	position:absolute;
fixed	position:fixed;

・fontシリーズ(font)

tail	css
text-sm	font-size: 14px;line-height:20px;
font-semibold	font-weight: 600;