# NativeWind：Tailwind 在 React Native 中的應用 (2024/06/07)

*By 鄭宇軒*

## Outline
1. Tailwind 簡介
1. NativeWind 安裝
1. Tailwind 使用範例
1. Tailwind 語法

## 1. Tailwind 簡介

Tailwind 是一款 CSS 設計套件，附有一系列已定義之設計，可以透過 class 來直接應用在各個元件中。

使用 Tailwind 的好處，是不需要自行定義 CSS 設計，只需加上需要用到的 class 即可，省卻開發時間；另外，Tailwind 的設計均符合 RWD 標準，可以輕鬆設計出適合各種螢幕尺寸的網頁和應用。

一般來說，Tailwind 是用在傳統網頁中的，如 React、Vue 等。可是，它也可以被應用在 React Native 中，因為 React Native 的元件設計方式非常類似傳統 CSS。

下列我們將透過 NativeWind 套件，在 React Native 應用中使用 Tailwind。

## 2. NativeWind 安裝

Step 1: 安裝 `nativewind` 和 `tailwind`:

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

Step 2: 初始化 Tailwind

npx tailwindcss init

Step 3: 在 `tailwind.config.js`，加入 `content` 路徑：

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./Pages/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: 在 `babel.config.js`，加入 `plugins` 路徑：

// babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};

Step 5: 重啟 expo，並加入 `-c` 選項：
`-c` 選項會強制要求 expo 清除 cache，使 Tailwind 的設計可以正確顯示。

npx expo start -c

[Reference](https://www.nativewind.dev/guides/troubleshooting)

## 3. Tailwind 使用範例

要使用的 Tailwind class，只需在目標元件的 `className` 屬性中標明即可。

<View className="items-center justify-center bg-black">
    <Text className="text-red-200">Futuristik Lagos- Home</Text>      
</View>

以上例子中，外層的 `View` 共有三個設計：`items-center`、`justify-center`、`bg-black`。

而內層的 `Text` 則有 `text-red-200` 的設計。

## 4. Tailwind 語法
雖然只是 `className`，但仍然有特定的語法需要跟隨。語法大致上是 `<設計名稱>-<數值>`，如 `bg-black` 的 `bg` 是指 `backgroundColor`，`black` 則是黑色。

也有些是數字作為數值的設計，如 `margin`，則需要用上中括號，如 `m-[10px]` 代表 `margin` 設成 `10px`。

部分有方向性的設計，如 `margin`、`padding` 等，可以額外加上方向：

`mt`: `marginTop`
`mb`: `marginBottom`
`ml`: `marginLeft`
`mr`: `marginRight`
`mx`: `marginLeft` + `marginRight`
`my`: `marginTop` + `marginBottom`

如有強制取代的需要，即 `!important`，只需在前面加上驚嘆號即可，如 `!bg-black`、`!mt-[10px]`

Tailwind 亦提供一些的顏色和粗幼度供選擇，如 `text-sky-300` 代表字體顏色變天空藍，深度 300；`font-bold` 則是粗體字。

另外，我們亦可以調整不同狀態下的設計，例如 `hover` 狀態下。例如 `hover:bg-red` 會在滑鼠指在元件上的時候，讓其背景變成紅色。

更多的設計選項，請參考 NativeWind 和 Tailwind 官網文件（建議以 NativeWind 為主）。

[NativeWind](https://www.nativewind.dev/overview/)
[Tailwind](https://tailwindcss.com/docs/utility-first)

## 練習作業 (至 2024/06/30)：

運用 Tailwind，實作出以下商品拍賣創建頁。只需設計即可，功能與邏輯為 Optional，但有興趣也可以加入邏輯。