[練習TailwindCSS]分析github的cruip/tailwind-dashboard-template專案

 

github位置：https://github.com/cruip/tailwind-dashboard-template.git

1. 觀看RWD效果

1-1. 1536 * 945(2xl)

1-2. 1280 * 945(xl)

1-3. 1024 * 945(lg)

 

1-4. 768 * 945(md)

1-5. 640 * 1080(sm)

1-5. 639 * 1080

2. 主要框架

2-1.body的class有:

font-inter // font-family: Inter, sans-serif;
antialiased // -webkit-font-smoothing: antialiased;
bg-gray-100 // background-color: rgba(241, 245, 249, 1);
text-gray-600 // color: rgba(71, 85, 105, 1);

筆記：
會先設定字體與背景

2-2.最外層div:

flex
h-screen // height: 100vh;
overflow-hidden

筆記：
高度限制100vh

2-3.左邊的menu

lg:w-64 // 1024px以上width都是16rem (後面的數字除以4)

筆記：
寬度寫死

2-3-1.左邊的menu > 漢堡選單出現時的黑色背景

fixed
inset-0 // top: 0px; right: 0px; bottom: 0px; left: 0px;
bg-gray-900
bg-opacity-30 // --tw-bg-opacity: 0.3;
z-40 // z-index: 40;
lg:hidden // 1024px以上 display: none;
lg:z-auto // 1024px以上 z-index: auto;
transition-opacity //漸變動畫：transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
duration-200 // transition-duration: 200ms;
opacity-0 // opacity: 0;
pointer-events-none //不會有手指頭也不會有超連結

筆記：
opacity在漢堡選單出現時，會是opacity-100，不然就維持在opacity-0

2-3-1.左邊的menu > sidebar

absolute
z-40
left-0
top-0
lg:static // 1024px以上 position: static;
lg:left-auto
lg:top-auto
lg:translate-x-0 // 1024px以上 translateX是0 (也就是不會往左收起來)
transform
h-screen
overflow-y-scroll //手機版時會有捲軸
lg:overflow-y-auto //1024以上沒有捲軸
no-scrollbar // scrollbar-width: none; (有捲軸可是不顯示)
w-64 // 除以四，16rem
flex-shrink-0// 固定比例，剩下留給兄弟
bg-gray-800
p-4
transition-transform // transition-property: transform; (為了做出向左收起來效果(切換translateX))
duration-200
ease-in-out
translate-x-0 //漢堡選單消失時，會變成.-translate-x-64 (-16rem)

筆記：
1024以下時，先用絕對定位把整塊位置讓出來，然後再用transform的translateX來決定選單收還合

2-3-1.左邊的menu > sidebar > 收合按鈕

lg:hidden // 1024以上時會消失
text-gray-500 //用文字顏色來控制svg顏色
hover:text-gray-400

(另外：其他html屬性)
aria-controls="sidebar"(指到整個sidebar的ID)
aria-expanded="true"(收還合，雖然好像仍需要用js控制)