---
title: 'RWD 切版教學'
disqus: hackmd
---

Tailwind 操作說明
===

## 目錄

[TOC]

## 前言

- vs code 安裝套件以達到輸入前綴即可autoComplete: **Tailwind CSS IntelliSense**
- 我們做法是將PostCSS當成的預處理器
- 讓 Tailwind 在生產環境建置時移除不必要的樣式
- RWD - 行動裝置優先

  // tailwind.config.js
  module.exports = {
   purge: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

- 在你的 CSS 中使用 Tailwind
> 我們做法是把tailwind基本樣式掛載進app.sass

- 目前專案中 我有開一個tailwind/custom-base-styles.sass, 來放置可能客製化統合的地方

.green-btn
  @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75

- 後續建議大家的寫法

<!-- 使用功能優先 Class -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  按我一下
</button>

<!-- 用 @apply 提取 Class -->
<button class="btn btn-green">
  按鈕
</button>

<style>
  .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>

.purple-text
  @apply text-purple-900
  font-size: 20px

如上描述 可以客製化自己寫的css搭配tailwind class name

> 統一用一個組件名稱去整合所有涵蓋的tailwind class name 以避免在html 上有一大堆class name

## 響應式設計 (RWD)
---

> 只需要加入該斷點的前綴詞，並在後面加上 : 即可。

> tailwind利用斷點的前綴來達到某寬度media時, 是什麼效果

<!-- 寬度預設值設為 16, 中等螢幕設為 32, 大螢幕設為 48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">

## 常用class name
- w- 類(尺寸大小)

- w-8: 固定寬度 width: 8rem (基本概念 8rem 會去吃root的font-size: 16px * 8 = 96px 寬度)
<div class="w-8 ..."></div>
- w-auto:  父層960px 則寬度為960px (width: auto)
- w-screen:  設定螢幕寬度(類似vw)
- w-full:  浮動滿版寬度
  <div class="w-1/6 ...">w-1/6</div>
  <div class="w-5/6 ...">w-5/6</div>
  <div class="w-full ...">w-full</div>
- max-w-0,  min-w-0
- max-w-full,  min-w-full

- text- 類

 - text-center 置中
 - text-left  置左
 - text-center  置右
 - text-purple-600  結合 color + text-opacity
 - underline, no-underline  是否底線(常用於link連結)
 - lowercase, uppercase, capitalize  (英文字大小寫)
 - text-base, text-sm, text-lg, text-xl  文字大小

- bg- 類

## Hover, Focus 以及其他狀態
- disabled: 前綴詞讓元素處於 disabled 狀態時才啟用該功能。
- hover: 前綴詞讓元素處於 hover 狀態
- focus: 前綴詞讓元素處於 focus 狀態時才啟用該功能。
- active: 前綴詞讓元素處於 active 狀態時才啟用該功能。
- group-hover: 在 hover 一個父元素時，讓其一個子元素產生樣式變化，在父元素加上 group class 並且在子元素新增 group-hover: 前綴詞

<input class="focus:ring-2 focus:ring-blue-600 ...">

<button class="bg-red-500 hover:bg-red-700 ...">
  Hover me
</button>

<button class="bg-green-500 active:bg-green-700 ...">
  Click me
</button>

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
  <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
  <p class="text-indigo-500 group-hover:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>

同理可證- active focus 前面加上group 即可整塊改變

<button class="disabled:opacity-50 ...">
  Submit
</button>
<button class="disabled:opacity-50 ..." disabled>
  Submit
</button>

## Flex 教學

.flex-container {
  display: flex | inline-flex;
  flex-direction: row | column; 對齊方向
  flex-wrap: nowrap | wrap; 是否換行
  justify-content: flex-start | flex-end | center | space-between ; // 水平
  align-items: flex-start | flex-end | center;  垂直
}

- flex重要概念
> ∙flex: Flexbox最重要的數值，分別是**flex-grow**、**flex-shrink** 和**flex-basis**。規定元素如何伸長或縮短以適應flex容器中的可用空間。

 .flex {
     /* 基本樣式 */
     width: 700px;
     height: 200px;
     border: 1px solid #999;
     font: 10px sans-serif;

     /*  Flexbox */
     display: -webkit-flex;
     -webkit-flex-direction: row;

     display: flex;
     flex-direction: row;
 }

 .flex > div {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     width: 100px;
 }

範例: https://codepen.io/Vue_Steve/pen/dyLKoPy