Zenn
Open10

TailwindCSS のよく使うStyling・チートシート🌟

CSS
Tailwind CSS
styleing
まさぴょんまさぴょん

FlixBox

Flex 中央寄せ

<div className='flex items-center justify-center'>

Flex 縦並び

<div className='flex flex-col'>

Flex 折り返す

<div className='flex flex-wrap gap-[10px] w-[270px] mt-[20px]'>

between

<div className="flex justify-between">
まさぴょんまさぴょん

Font系

文字の色, 太さ, フォント変更

<p className="font-['Roboto'] font-bold text-[#FF454D]">

文字を折り返させない

whitespace-nowrap	// white-space: nowrap;
まさぴょんまさぴょん

display系

  • display: none;だけhidden
  • それ以外は、元々と同じ名前での指定

display: none;

<div className='hidden'>

display: flex;

<div className='flex'>

display: grid;

<div className='grid'>
まさぴょんまさぴょん

カード型など

<div className='h-[270px] w-[270px] cursor-pointer rounded-[5px] border-none object-cover shadow-md transition-transform duration-200 ease-in-out'>

影の部分

shadow-md transition-transform duration-200 ease-in-out
まさぴょんまさぴょん

×ボタンを作成する

通常のCSS

width: 20px;
height: 20px;
font-weight: bold;
background-color: #AFAEB3;
color: #fff;
border-radius: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 30px;
left: 250px;

TailwindCSS

<div
  className='relative left-[250px] top-[30px] flex h-[20px] w-[20px] cursor-pointer items-center justify-center rounded-[100%] bg-[#AFAEB3] font-bold text-[#fff]'
  onClick={() => deleteFile()}
>
  ×
</div>