LoginSignup
0
0

More than 1 year has passed since last update.

Tailwind CSSでよく使うもの

Last updated at Posted at 2023-05-03

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0