# Vite+Tailwind 教學

## 套件介紹

## Vite 環境介紹 ([GitHub](https://github.com/hexschool/web-layout-training-vite/tree/feature/tailwind)、[官網](https://tailwindcss.com/docs/guides/vite))

步驟一：安裝 NPM：`npm install -D tailwindcss postcss autoprefixer`
步驟二：增加 tailwind.config.js，並添加如下

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. content：主要偵測哪些頁面用到 tailwind ，並嘗試壓縮
2. theme：是指繼承覆蓋樣式，[官方常見樣式](https://tailwindcss.com/docs/theme)
3. plugins：使用相關套件

 extend 是為了保持 Tailwind 的預設配置，同時添加或修改特定的設置。這提供了一種彈性和安全的方式來自定義你的設置，而不擔心破壞任何預設值。

## Tailwind 導讀

* [tailwind 官網](https://tailwindcss.com/docs/installation)
* [group hover](https://codepen.io/hexschool/pen/XWoKgLo)