リスト
bg-(color name)
Control the background color of an element
https://tailwindcss.com/docs/background-color/#app
breakpoint(sm 640,md 768,lg 1024,xl 1280)
The .container class sets the max-width of an element to match the min-width of the current breakpoint.
(ex)
h-auto
Use h-auto to let the browser determine the height for the element.
h-full
Use h-full to set an element's height to 100% of its parent, as long as the parent has a defined height.
What is different between h-auto and h-full.
h-auto: contents height
h-full: parent’s element height
https://www.quora.com/What-is-the-difference-between-auto-and-100-value-in-CSS
h-screen (=height:100vh →vh means viewpoint height. 1vh=1/100viewpoint)
Use h-screen to make an element span the entire height of the viewport.
https://hysryt.com/archives/1092
.max-h-full
Height is same as parent’s element.if over,→overflow
https://web-designer.cman.jp/css_ref/abc_list/max-height/
https://stackoverflow.com/questions/45552111/height-100-not-working-when-parent-div-only-has-max-height/45552551
Overflow(visible,:hidden,scroll,auto).
Note that any content that overflows the bounds of the element will then be visible.
to clip any content within an element that overflows the bounds of that element.
to allow horizontal scrolling if needed.
this utility will only show them if scrolling is necessary.
https://techacademy.jp/magazine/9428
When I wanna add only smart phone size.
Use lg:hidden
http://bootstrap3.cyberlab.info/css/responsiveUtilities.html
1
When I use ml-auto,mr-auto (=mx-auto)
Center
When I use ml-auto,mr-0,
Right
Position absolute relative fixed
Use Top-0 right-0 left-0 bottom-0
Parents→relative child→absolute
https://www.w3schools.com/css/css_positioning.asp
CSS Grid Layout
Grid=display:grid
grid-row: アイテムが占める行のラインの番号をスラッシュ区切りで指定する
grid-column: アイテムが占める列のラインの番号をスラッシュ区切りで指定する
https://qiita.com/kura07/items/e633b35e33e43240d363
display:block
https://www.sejuku.net/blog/52636
https://www.w3schools.com/css/css_inline-block.asp
flex (inlineblock,float is same function)
https://mamewaza.com/support/blog/howto-use-flex.html
flex col
https://tailwindcss.com/docs/flex-direction/
border-radius: → rounded
https://tailwindcss.com/docs/border-radius/#app
items-center
https://tailwindcss.com/docs/align-items/#app
items-center justify-contents
https://goodsan.jp/wp/justifycontent/