Tailwind CSSでよく使うもの

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

・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;

・leadingシリーズ(line-height)

tail	css
leading-none	line-height: 1;
leading-tight	line-height: 1.25;
leading-snug	line-height: 1.375;
leading-normal	line-height: 1.5;
leading-relaxed	line-height: 1.625;
leading-loose	line-height: 2;

・trackingシリーズ(letter-space)

tail	css
tracking-tighter	letter-spacing: -0.05em;
tracking-tight	letter-spacing: -0.025em;
tracking-normal	letter-spacing: 0em;
tracking-wide	letter-spacing: 0.025em;
tracking-wider	letter-spacing: 0.05em;
tracking-widest	letter-spacing: 0.1em;