<template>
<div class="home">
<!-- p-6 // padding: 1.5rem -->
<!-- max-w-sm // max-width: 24rem -->
<!-- bg-white // background-color: rgba(255,255,255,var(--tw-bg-opacity)); -->
<!-- rounded-xl // border-radius: .75rem; -->
<!-- shadow-md // --tw-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); -->
<!-- flex // display: flex; -->
<!-- items-center // align-items: center; -->
<!-- flex-shrink-0 // flex-shrink: 0; -->
<!-- w-12 // width: 3rem -->
<!-- h-12 // height: 3rem -->
<!-- text-xl // font-size: 1.25rem; line-height: 1.75rem; -->
<!-- font-medium // font-weight: 500; -->
<!-- text-black // --tw-text-opacity: 1; color: rgba(0,0,0,var(--tw-text-opacity)); -->
<!-- text-gray-500 // --tw-text-opacity: 1; color: rgba(107,114,128,var(--tw-text-opacity)); -->
<!-- space-x-4 // .space-x-4>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } -->
<div class="p-6 max-w-sm bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class=" flex-shrink-0">
<img class=" h-12 w-12" src="https://fakeimg.pl/12x12/eeeeee">
</div>
<div>
<div class=" text-xl font-medium text-black">聊天呦</div>
<div class=" text-gray-500">你有新訊息</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, reactive } from 'vue'
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style>
</style>
<template>
<div class="home">
<!-- py-8 // padding-top: 2rem; padding-bottom: 2rem; -->
<!-- px-8 // padding-left: 2rem; padding-right: 2rem; -->
<!-- max-w-sm // max-width: 24rem; -->
<!-- mx-auto // margin-left: auto; margin-right: auto; -->
<!-- space-y-2 // .-space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse)); } -->
<!-- sm:py-4 //@media (min-width: 640px) { padding-top: 1rem; padding-bottom: 1rem; } -->
<!-- sm:flex //@media (min-width: 640px) { display: flex; } -->
<!-- sm:items-center // @media (min-width: 640px) { align-items: center; } -->
<!-- sm:space-y-0 // @media (min-width: 640px) { .space-y-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } } -->
<!-- sm:space-x-6 // @media (min-width: 640px) { .space-x-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1.5rem * var(--tw-space-x-reverse)); margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); } } -->
<!-- block // display: block; -->
<!-- h-24 // height: 6rem; -->
<!-- rounded-full // border-radius: 9999px; -->
<!-- sm:mx-0 // @media (min-width: 640px) { margin-left: 0px; margin-right: 0px; } -->
<!-- sm:flex-shrink-0 // @media (min-width: 640px) { flex-shrink: 0; } -->
<!-- text-center //text-align: center; -->
<!-- sm:text-left // @media (min-width: 640px) { text-align: left; } -->
<!-- space-y-0.5 // .space-y-0\.5> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } -->
<!-- text-lg // font-size: 1.125rem; line-height: 1.75rem; -->
<!-- font-semibold // font-weight: 600; -->
<!-- text-gray-500 // --tw-text-opacity: 1; color: rgba(107, 114, 128, var(--tw-text-opacity)); -->
<!-- px-4 // padding-left: 1rem; padding-right: 1rem; -->
<!-- py-1 // padding-top: 0.25rem; padding-bottom: 0.25rem; -->
<!-- text-sm // font-size: 0.875rem; line-height: 1.25rem; -->
<!-- text-purple-600 // --tw-text-opacity: 1; color: rgba(124, 58, 237, var(--tw-text-opacity)); -->
<!-- border //border-width: 1px; -->
<!-- border-purple-200 // --tw-border-opacity: 1; border-color: rgba(221, 214, 254, var(--tw-border-opacity)); -->
<!-- hover:text-white //.hover\:text-white:hover { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } -->
<!-- hover:bg-purple-600 // .hover\:bg-purple-600:hover { --tw-bg-opacity: 1; background-color: rgba(124, 58, 237, var(--tw-bg-opacity)); } -->
<!-- hover:border-transparent // .hover\:border-transparent:hover { border-color: transparent; } -->
<!-- focus:outline-none //.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } -->
<!-- focus:ring-2 //.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -->
<!-- focus:ring-purple-600 // .focus\:ring-purple-600:focus { --tw-ring-opacity: 1; --tw-ring-color: rgba(124, 58, 237, var(--tw-ring-opacity)); } -->
<!-- focus:ring-offset-2 // .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } -->
<!-- p-6 // padding: 1.5rem -->
<!-- flex // display: flex; -->
<!-- items-center // align-items: center; -->
<!-- flex-shrink-0 // flex-shrink: 0; -->
<!-- w-12 // width: 3rem -->
<!-- h-12 // height: 3rem -->
<!-- text-xl // font-size: 1.25rem; line-height: 1.75rem; -->
<!-- font-medium // font-weight: 500; -->
<!-- text-gray-500 // --tw-text-opacity: 1; color: rgba(107,114,128,var(--tw-text-opacity)); -->
<!-- space-x-4 // .space-x-4>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } -->
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img src="https://fakeimg.pl/100x100" alt="" class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0">
<div class="text-center space-y-2 sm:text-center">
<div class=" space-y-0.5">
<p class=" text-lg text-black font-semibold">Jerry</p>
<p class=" text-gray-500 font-medium">Engineer</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Button</button>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, reactive } from 'vue'
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style>
</style>
<template>
<div class="home">
<!-- py-2 // padding-top: 0.5rem; padding-bottom: 0.5rem; -->
<!-- px-4 // padding-left: 1rem; padding-right: 1rem; -->
<!-- font-semibold // font-weight: 600; -->
<!-- rounded-lg // border-radius: 0.5rem; -->
<!-- shadow-md // --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -->
<!-- text-white //--tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)) -->
<!-- bg-green-500 // --tw-bg-opacity: 1; background-color: rgba(16, 185, 129, var(--tw-bg-opacity)) -->
<!-- hover:bg-green-700 //.hover\:bg-green-700:hover { --tw-bg-opacity: 1; background-color: rgba(4, 120, 87, var(--tw-bg-opacity)); } -->
<button class="btn btn-green">Click</button>
</div>
</template>
<script setup>
import { defineProps, reactive } from 'vue'
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style lang="postcss">
.btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-md;
}
.btn-green {
@apply text-white bg-green-500 hover:bg-green-700;
}
</style>
<template>
<div class="home">
<!-- 只要class前面沒有sm/md/lg/xl之類的，就是在指手機 -->
<!-- max-w-md // max-width: 28rem; (xs 20rem / sm 24rem / md 28rem / lg 32rem / xl 36rem / 2xl 42rem / 3xl 48rem / 4xl 56rem / 5xl 64rem / 6xl 72rem / 7xl 80rem / full 100%)-->
<!-- mx-auto // margin-left: auto; margin-right: auto; -->
<!-- bg-white // 白色背景-->
<!-- rounded-xl // 圓角 (sm 0.125rem / '' 0.25rem / md 0.375rem / lg 0.5rem / xl 0.75rem / 2xl 1rem / 3xl 1.5rem / full 9999px)-->
<!-- shadow-md // 陰影 ( sm / '' / md / lg / xl / 2xl / inner / none )-->
<!-- overflow-hidden // 隱藏超出去的-->
<!-- md:max-w-2xl // 寬度640px以上時，最大寬度42rem-->
<!-- md:flex // 寬度640px以上時，用flex排版(為了做到水平排列)-->
<!-- md:flex-shrink-0 // 寬度640px以上時，他維持正常大小，其他空間給他兄弟-->
<!-- h-48 // 高度12rem (0 0px / 1 0.25rem / 2 0.5rem / 3 0.75rem / 4 1rem / 5 1.25rem / 6 1.5rem / 7 1.75rem / 8 2rem / 9 2.25rem / 10 2.5rem / 11 2.75rem / 12 3rem / 14 3.5rem / 16 4rem / 20 5rem / 24 6rem / 28 7rem / 32 8rem / 36 9rem / 40 10rem / 44 11rem / 48 12rem / 52 13rem / 56 14rem / 60 15rem / 64 16rem / 72 18rem / 80 20rem / 96 24rem / auto auto / px 1px / 0.5 0.125rem / 1.5 0.375rem / 2.5 0.625rem / 3.5 0.875rem / 1/2 50% / 1/3 33.333333% / 2/3 66.666667% / 1/4 25% / 2/4 50% / 3/4 75% / 1/5 20% / 2/5 40% / 3/5 60% / 4/5 80% / 1/6 16.666667% / 2/6 33.333333% / 3/6 50% / 4/6 66.666667% / 5/6 83.333333% / full 100% / screen 100vh) -->
<!-- w-full // 寬度100% -->
<!-- object-cover // object-fit: cover; (填滿他爸，並等比縮放)-->
<!-- md:h-full // 寬度640px以上時，高度100%-->
<!-- md:w-48 // 寬度640px以上時，寬度12rem-->
<!-- p-8 // 內距2rem (0 0px / 1 0.25rem / 2 0.5rem / 3 0.75rem / 4 1rem / 5 1.25rem / 6 1.5rem / 7 1.75rem / 8 2rem / 9 2.25rem / 10 2.5rem / 11 2.75rem / 12 3rem / 14 3.5rem / 16 4rem / 20 5rem / 24 6rem / 28 7rem / 32 8rem / 36 9rem / 40 10rem / 44 11rem / 48 12rem / 52 13rem / 56 14rem / 60 15rem / 64 16rem / 72 18rem / 80 20rem / 96 24rem / px 1px / 0.5 0.125rem / 1.5 0.375rem / 2.5 0.625rem / 3.5 0.875rem)-->
<!-- uppercase // 強制大寫-->
<!-- tracking-wide // letter-spacing: 0.025em; 字距放大 (tighter -0.05em / tight -0.025em / normal 0em / wide 0.025em / wider 0.05em / widest 0.1em)-->
<!-- text-sm // 字體大小0.875rem(xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.25rem / 2xl 1.5rem / 3xl 1.875rem / 4xl 2.25rem / 5xl 3rem / 6xl 3.75rem / 7xl 4.5rem / 8xl 6rem / 9xl 8rem)-->
<!-- text-indigo-500 // 文字顏色靛青-->
<!-- font-semibold // 文字粗體600 (thin 100 / extralight 200 / light 300 / normal 400 / medium 500 / semibold 600 / bold 700 / extrabold 800 / black 900)-->
<!-- block // 元素一個一個換行排列-->
<!-- mt-1 // 外距往上 0.25rem-->
<!-- text-lg // 字體大小1.125rem-->
<!-- leading-tight // 行距1.25rem (3 .75rem / 4 1rem / 5 1.25rem / 6 1.5rem / 7 1.75rem / 8 2rem / 9 2.25rem / 10 2.5rem / none 1 / tight 1.25 / snug 1.375 / normal 1.5 / relaxed 1.625 / loose 2)-->
<!-- font-medium // 文字粗體500-->
<!-- text-black // 黑色文字-->
<!-- hover:underline // 滑鼠滑入就有底線-->
<!-- mt-2 // 外距向上 0.5rem-->
<!-- text-gray-500 // 灰色文字-->
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class=" md:flex">
<div class=" md:flex-shrink-0">
<img src="https://fakeimg.pl/100x100" alt="" class=" h-48 w-full object-cover md:h-full md:w-48">
</div>
<div class=" p-8">
<div class=" uppercase tracking-wide text-sm text-indigo-500 font-semibold">有點寬寬的標題</div>
<a href="" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">行距不要太大的連結</a>
<p class=" mt-2 text-gray-500">我家這一一本戀愛生命貫徹手續主演浪費，安全三星但我站長轉換利用著名，等人給我們放在，釣魚國際錯誤章節沒有任何建議參加大全部分節目羅東實現建議，保障電子技術同事跟我科技有限公司首先作出絶不均為上次信號，眼裡一樣，恐怖刷新孤獨都在操作實在身體激烈還在宅宅哈哈。</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
長度對照表：https://tailwindcss.com/docs/customizing-spacing
斷點對照表：https://tailwindcss.com/docs/breakpoints
顏色對照表：https://tailwindcss.com/docs/colors
object-position對照表：https://tailwindcss.com/docs/object-position
ring的使用方式https://tailwindcss.com/docs/ring-width
box-shadow對照表https://tailwindcss.com/docs/box-shadow
沒有留言:
張貼留言