# 建立Tailwind CSS並加入現有專案

{%hackmd hackmd-dark-theme %}

tags: `前端`

## 需求

為因應客製化或是更細微的自由切版。

## 安裝及配置

### 安裝tailwind css

1. 先安裝tailwind css

* [Tailwind CSS](https://tailwindcss.com/docs/installation)

npm install -D tailwindcss
npx tailwindcss init

2 建立tailwind.config.js，並配置設定檔

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    corePlugins: {
        // preflight: true, // 使用tailwindcss 內建 CSS reset
        preflight: false, // 不使用tailwindcss 內建 CSS reset
    },
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
    extend: {},
    },
    plugins: [],
};

3 將Tailwind css放入新建立的css檔案使用

文件預設input.css

// src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

### 安裝autoprefixer

自動幫CSS加上前輟詞的工具

* [autoprefixer](https://github.com/postcss/autoprefixer)
`npm install autoprefixer --save-dev`

### 安裝postcss-import

* [postcss-import](https://github.com/postcss/postcss-import)
`npm install -D postcss-import`

引入安裝的相關套件至PostCSS

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

### 與Naive UI的樣式衝突

由於naive ui既有樣式，會與tailwind css的預處理器產生衝突(preflight: true時會是tailwind css的初始css reset)，官方文件建議加入以下代碼：

// 解決naiveUI潛在樣式衝突問題　
// main.js
 const meta = document.createElement('meta');
 meta.name = 'naive-ui-style';
 document.head.appendChild(meta);

* 但可能無法完美解決會有字形或是調整欄寬等問題，開發時有碰到需再觀察。

---

### 目前專案開發為了不影響現有的bootstrap切版樣式，採取有需使到tailwind css再引入的方式：

* preflight設定為preflight: false

* 由於無開啟preflight，故不需naive ui官方文件的衝突解決方案，但仍保留在main.js裡，未來有需要再因應變化調整。