# tailwind css應用相關筆記
###### tags: `tailwind`,`css`
## 切版&排版
### 上方navbar,左側sidebar
```htmlembedded=
<div class="
bg-green-700 h-[10vh]
w-full -z-10
flex
pl-4
">
<span class="leading-[10vh] text-white text-2xl font-extrabold">hihi</span>
</div>
<div class="absolute h-[100vh] w-[150px] bg-black text-white">
<div class="mt-2">123</div>
</div>
```
## align
### 水平置中absolute element
使用left-0 right-0 mx-auto,
再設定w即可
```htmlembedded!
<div class="relative">
<div class="absolute bg-yellow-200 shadow-md shadow-yellow-700
top-[-17%] w-[120px] left-0 right-0 mx-auto
h-[120px] rounded-[100%] ">
</div>
</div>
```
### inline vertical align ex1
align-top,align-middle,align-bottom
(限inline跟inline-block元素使用)
```htmlembedded!
<div class="main">
<div class="inline text-4xl align-top">text</div>
<div class="inline align-middle">text</div>
<div class="inline align-bottom">text</div>
</div>
```
## scrollbar
### 常用屬性
只在需要時顯現y軸scrollbar
scroll-y-auto
overflow-y-auto
永遠顯現y軸scrollbar
overflow-y-scroll
## form element
### 去除input被點擊時出現的outline
[參考資料](https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome)
```htmlembedded!
<input type="text" class="outline-0">
```
## plugin
### 自製plugin:設定元素寬度
plugins/twkhjl-col.js
```htmlembedded!
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function ({ matchUtilities}) {
matchUtilities(
{
'twkhjl-col': function (value) {
let arr=value.split(',');
if(arr.some(function(e){
return isNaN(e*1) || e*1 < 0;
})){
return {};
}
let m=arr.length==1?'2':arr[1];
let output = (100 / arr[0])-m*2;
return {
'width': `${output}%`,
'margin-left':`${m}%`,
'margin-right':`${m}%`,
};
},
}
)
})
```
tailwind.config.js
```javascript!
...
plugins: [
require('./plugins/twkhjl-col')
],
...
```
html
```htmlembedded!
<!-- 只寫一個數字,表示(100/N-4)%,如輸入3,則表示欄寬佔(100/3-4)%=29.3333...%,ml跟mr會自動設定為2% -->
<div class="flex flex-wrap">
<div class="w-full md:twkhjl-col-[3]">123</div>
<div class="w-full md:twkhjl-col-[3]">123</div>
<div class="w-full md:twkhjl-col-[3]">123</div>
</div>
<!-- 寫兩個數字n1,n2,表示(100/n1-n2*2)%,ml跟mr均為n2% ,下方範例表示元素寬度為(100/3-1*2)=31.333..%,ml跟mr均為1% -->
<div class="flex flex-wrap">
<div class="w-full md:twkhjl-col-[3,1]">123</div>
<div class="w-full md:twkhjl-col-[3,1]">123</div>
<div class="w-full md:twkhjl-col-[3,1]">123</div>
</div>
```
## grid
### 基本使用
```htmlembedded!
<div class="grid grid-cols-1 gap-x-2 gap-y-4 sm:grid-cols-2 md:grid-cols-3 p-4 border-4 border-black">
<div class="bg-purple-600 rounded-xl text-center p-4 text-white">01</div>
<div class="bg-purple-600 rounded-xl text-center p-4 text-white">02</div>
<div class="bg-purple-600 rounded-xl text-center p-4 text-white">03</div>
<div class="bg-purple-600 rounded-xl text-center p-4 text-white">04</div>
<div class="bg-purple-600 rounded-xl text-center p-4 text-white">05</div>
<div class="bg-purple-600 rounded-xl text-center p-4 text-white">06</div>
<div class="bg-purple-600 rounded-xl text-center p-4 text-white sm:col-span-2 md:col-span-3 mt-7">01</div>
</div>
```
## flex
### 將特定element寬度符合其文字內容
橫向: **mx-auto mt-0**
```htmlembedded
<style>
*{
border:1px solid black;
}
</style>
<div class="flex flex-col">
<div class="mx-auto ml-0">some text</div>
<div class="">some text</div>
<div class="">some text</div>
</div>
```
直向: **my-auto mt-0**
```htmlembedded!
<style>
*{
border:1px solid black;
}
</style>
<div class="flex h-[150px]">
<div class="my-auto mt-0">some text</div>
<div class="">some text</div>
<div class="">some text</div>
</div>
```
### 將所有element延伸
直向: 使用 **items-stretch**
```htmlembedded
<style>
*{
border:1px solid black;
}
</style>
<div class="flex h-[150px] items-stretch">
<div class="">some text</div>
<div class="">some text</div>
<div class="">some text</div>
</div>
```
橫向: 使用 **justify-items-stretch**
```htmlembedded
<style>
*{
border:1px solid black;
}
</style>
<div class="flex flex-col items-stretch">
<div class="">some text</div>
<div class="">some text</div>
<div class="">some text</div>
</div>
```
### 將最左邊那個element靠左對齊,其他往右靠
方1:使用mr-auto
此方式的element border不變
```htmlembedded!
<div class="flex">
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl mr-auto">A</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">B</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">C</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">D</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">E</div>
</div>
```
方2:使用flex-1
此方式會把剩下的空白都加進去該element的border
```htmlembedded!
<div class="flex">
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl flex-1">A</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">B</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">C</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">D</div>
<div class="m-2 w-20 h-20 bg-black text-white text-center py-6 text-2xl">E</div>
</div>
```
## image
### background image basic usage
方1:直接將路徑寫死
```htmlembedded!
<div class="bg-[url('https://fakeimg.pl/300/')] h-[300px] w-full bg-no-repeat bg-cover bg-center"></div>
```
方2:修改tailwind.css.config
```css!
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {
backgroundImage: {
'hero': "url('https://fakeimg.pl/300/')",
}
},
},
plugins: [],
}
```
使用方式示意
```
<div class="bg-hero h-[300px] w-full bg-no-repeat bg-cover bg-center"></div>
```
### img搭配半透明背景顏色
```htmlembedded!
<div class="relative">
<img src="https://fakeimg.pl/650x350/" class="w-full mx-0">
<div class="
absolute top-0
w-full h-full
bg-purple-900 bg-opacity-60
flex flex-col justify-center
">
<div class="text-6xl text-white text-center">text</div>
</div>
</div>
```
## video
### full-screen video background
https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/
*video關鍵字:free video loop
```htmlembedded!
<header class="relative flex items-center justify-center h-screen overflow-hidden">
<video autoplay loop muted class="absolute z-10 w-auto min-w-full min-h-full max-w-none -z-10">
<source
src="ur_video_link.mp4"
type="video/mp4" />
</video>
</header>
```
## hover effect
### 下方底線往兩邊延伸
[參考資料](https://htmlcodex.com/hospital-website-template/)
```htmlembedded!
<div class="
inline-block
relative
before:absolute
before:w-0
before:bg-gray-400
before:h-1
before:bottom-0
before:left-1/2
before:hover:w-full
before:hover:left-0
before:transition-all
before:duration-200
">link1</div>
```
## Opacity
### border opacity
https://v2.tailwindcss.com/docs/border-opacity
border-opacity-數字
e.g.
border-opacity-50
```
<div class="border-4 h-[50px] w-1/2 ml-[20%] mt-5 border-green-500 border-opacity-50"></div>
```
## transition & animation
### 用高度切換做出下拉效果
```htmlembedded=
<div class="border-2 border-black max-h-[10px] hover:max-h-[500px]
overflow-hidden
transition-all duration-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa eius, beatae est quos modi, quidem rem repellendus aperiam eos, magni ad voluptates eaque itaque at voluptate quod consectetur nemo porro!
</div>
```
### 使用animate-ping(tailwind預設效果)
https://play.tailwindcss.com/nm6ywMPazm
```htmlembedded=
<span class="mt-10 mx-[30vw] flex h-[150px] w-auto items-center justify-center border-2 border-black">
<span class="absolute h-[50px] w-[50px] animate-ping rounded-full border-2 border-black bg-teal-200"></span>
<span class="relative h-[50px] w-[50px] rounded-full border-2 border-black bg-teal-500"></span>
</span>
```
### checkbox勾選動畫
https://play.tailwindcss.com/fPyOwVAAmi
```htmlembedded!
<label class="relative flex items-center ml-10 mt-10">
<input type="checkbox" class="peer absolute left-0 h-0 w-0" />
<span class="relative
block
h-[35px] w-[35px]
rounded-full shadow-inner shadow-black
hover:bg-gray-200
peer-checked:bg-gray-200
transition-all duration-200
after:top-5 after:left-5
after:absolute
after:h-[0px] after:w-[0px]
after:rotate-[225deg]
after:border-t-[0px] after:border-l-[0px]
after:border-t-green-700 after:border-l-green-700
peer-checked:after:h-[15px]
peer-checked:after:w-[12px]
peer-checked:after:border-t-[4px]
peer-checked:after:border-l-[4px]
peer-checked:after:top-2
peer-checked:after:left-2.5
after:transition-all after:duration-200
"></span>
<div class="ml-2 relative
after:w-0
after:transition-all after:duration-150
after:absolute after:bottom-0 after:left-0
after:border-b-2 after:border-b-green-500
peer-checked:after:w-full
">記住我</div>
</label>
```
Sign in with Wallet
Connect another wallet