Web Frontend: CSS - Tailwind CSS

[hhstore]

related:

• ✅ Web Frontend: Vue.js #405
• ✅ Web Frontend: Vue.js UI Framework - Quasar #403
• ✅ Tauri: a framework that allows you to build cross-platform apps #408
• ✅ xxx

[hhstore]

前端流行样式方案: Tailwind CSS

• https://tailwindcss.com/
• 经常用, 但一直没做总结.
• 随用随忘. (记忆力大不如前)
• 故把常用的一些 CSS 样式效果, 整理个 CheatSheet.

cheatsheet:

• ✅️ https://flowbite.com/tools/tailwind-cheat-sheet/
• ✅️ https://nerdcave.com/tailwind-cheat-sheet
• ✅️ https://tailblocks.cc/

[hhstore]

Tailwind 常用样式:

[hhstore]

布局: Layout

Flex:

• https://tailwindcss.com/docs/flex-basis

行: Row

• https://tailwindcss.com/docs/flex-direction#row

<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

列: Column

• https://tailwindcss.com/docs/flex-direction#column
• https://tailwindcss.com/docs/columns

<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

网格: Grid

• https://tailwindcss.com/docs/grid-template-columns

[hhstore]

配色卡: Color

• https://colorhunt.co/
• https://colorhunt.co/palettes/popular
• https://mui.com/material-ui/customization/color/#color-palette

背景色:

• https://tailwindcss.com/docs/background-color

元素边框颜色:

• https://tailwindcss.com/docs/border-color

[hhstore]

尺寸表:

• https://tailwindcss.com/docs/width

w-full


w-screen

[hhstore]

元素对齐方式:

• https://tailwindcss.com/docs/align-items
• 很烦, 常用.

空白符(间距):

• https://tailwindcss.com/docs/padding

Padding:

• https://tailwindcss.com/docs/padding

Margin:

• https://tailwindcss.com/docs/margin

space:

• https://tailwindcss.com/docs/space

gap:

• https://tailwindcss.com/docs/gap

[hhstore]

文本/字体: text/font

• https://tailwindcss.com/docs/font-size
• https://tailwindcss.com/docs/font-style

加粗:

• https://tailwindcss.com/docs/font-weight

font-bold

[hhstore]

分割线:

• https://tailwindcss.com/docs/divide-width

[hhstore]

元素特效: Transition/Transform

• https://tailwindcss.com/docs/transition-duration
• 元素翻转
• 选中, 有阴影效果
• 选中, 放大

翻转:

• https://tailwindcss.com/docs/rotate

[hhstore]

滚动条:

• https://tailwindcss.com/docs/scroll-behavior

边框:

• https://tailwindcss.com/docs/border-radius

[hhstore]

icon:

• https://heroicons.com/