---
# System prepended metadata

title: tailwind css應用相關筆記
tags: [css, tailwind]

---

# 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>

```




