New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web Frontend: CSS - Tailwind CSS #402

Open

hhstore opened this issue Jun 13, 2023 · 11 comments

Labels

Quasar VueJS Web

Owner

hhstore commented Jun 13, 2023 •

edited

Loading

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

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

前端流行样式方案: Tailwind CSS

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

cheatsheet:

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

Owner Author

hhstore commented Jun 13, 2023

Tailwind 常用样式:

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

布局: 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

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

网格: Grid

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

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

配色卡: Color

背景色:

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

元素边框颜色:

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

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

尺寸表:

https://tailwindcss.com/docs/width

w-full


w-screen

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

元素对齐方式:

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

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

文本/字体: text/font

加粗:

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

font-bold

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

分割线:

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

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

元素特效: Transition/Transform

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

翻转:

https://tailwindcss.com/docs/rotate

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

滚动条:

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

边框:

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

Owner Author

hhstore commented Jun 13, 2023 •

edited

Loading

icon:

https://heroicons.com/

This was referenced Jun 13, 2023

Web Frontend: Vue.js UI Framework - Quasar #403

Open

Python Web UI: NiceGUI #401

Open

hhstore added VueJS Web Quasar labels

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment