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