Tailwind CSS + SCSS + Vite 環境建置
===
綱要：
[TOC]
本課程完整範例
---
原始碼請參閱：https://github.com/fortes1219/tailwind_feat_scss
什麼?! Tailwind可以寫在SCSS裡面??
===
你或許覺得意外，PostCSS為Base開發的Tailwind為何可以存在不同的預處理器中。
事實上Tailwind官方文件中提到了一件事：
:::info
**Since Tailwind is a PostCSS plugin, there’s nothing stopping you from using it with Sass, Less, Stylus, or other preprocessors, just like you can with other PostCSS plugins like Autoprefixer.**
(由於 Tailwind 是一個 PostCSS 插件，沒有什麼可以阻止您使用 Sass，Less，Stylus 或其他預處理器，就像您可以使用其他 PostCSS 插件，如 Autoprefixer。)
:::
乍看下你可能會以為官方講幹話，讓你用PostCSS環境寫Tailwind就好，實際上不是那麼回事。
我們知道Sass/Scss本身是預處理器，那麼讓它寫作時就能接受語法上的不同不就行了?
反正編譯出來的同樣是CSS，但做得到嗎？
當然沒問題！只需要調整些VSCODE內建的Lint設定，以及安裝NodeJS的相依套件很輕易就可以做到。
---
一、安裝相依套件
===
安裝 Vite 過程可以看這裡：
https://hackmd.io/@FortesHuang/Skr0OUlB9#%E5%AE%89%E8%A3%9DVite%E4%B8%A6%E4%B8%94%E5%BB%BA%E7%AB%8B%E4%B8%80%E5%80%8B%E5%9F%BA%E7%A4%8E%E6%A8%A1%E6%9D%BF
不過這次開發環境中前端框架我們使用 **Vue3.0** 來測試
實際玩過 **VanillaJS** 環境也一樣可以，按照自己專案需求建立即可
現在從`D:/web`中來開個專案試試：
```bash=
npm create vite@latest
```
過程中，專案命名為 ==**tailwind_feat_scss**==
框架我們選擇 vue，別選到 vue-ts 就好，除非你專案上有特別需要 Typescript。
然後在終端機裡輸入指令來安裝幾個套件
**安裝Sass**
---
```bash=
npm add -D sass
npm add -D sass-loader ## 如果你是webpack才需要loader，vite可以省略
```
**Tailwind CSS & PostCSS & AutoPrefix**
---
```bash=
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
**安裝PostCSS相關套件**
---
```bash=
npm install postcss-import
npm install postcss-nesting
```
**生成 Tailwind CSS 和 PostCSS 的 Config 設定檔**
---
```bash=
npx tailwindcss init -p
```
這段指令會產生兩個檔案： **tailwind.config.js** 和 **postcss.config.js**
稍後我們再來進行Config的配置，先繼續往下安裝要用的套件
**Stylelint**
---
```bash=
npm i --save-dev stylelint stylelint-config-standard
```
---
二、設定 Tailwind CSS 環境
===
配置設定檔
---
都安裝好後就打開**tailwind.config.js** 和 **postcss.config.js**
tailwind的設定檔比較簡潔，這裡可以按照你實際專案需要配置。
```javascript=
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{html, js, ts, vue}",
"./src/**/*"
],
theme: {
extend: {},
},
plugins: []
}
```
PostCSS的設定則是將剛才我們安裝過的相關套件引入，寫在plugins裡面
**Vite 4以上版本**
```javascript=
// postcss.config.js
import postcssImport from 'postcss-import';
import postcssNesting from 'postcss-nesting';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
export default {
plugins: [
postcssImport,
tailwindcss({ nesting: postcssNesting }),
tailwindcss,
autoprefixer,
],
}
```
**Webpack**
```javascript=
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('tailwindcss'),
require('autoprefixer'),
]
}
```
在專案中引入Tailwind CSS
---
我們在style.scss中就可以將base、components、utillities三個library透過import指令導入，建議在你自有的其它scss檔後面引入。
再到main.js的表頭import這支style.scss
接著我們可以嘗試寫點東西，在App.vue的template上寫一個命名為box的class包覆。
樣式的配置，使用Tailwind中常用來組合樣式的 **@apply** 指令試試。
==**......居然會噴個未知的rule警告?!**==
我們試試看啟動Vite環境，是否也會報出同樣的警告
```bash=
npm run dev
```
咦? 看起來並沒有問題啊，@apply樣式也有被正確引用，但為什麼VSCODE上會出現Warning?
先別急著懷疑這些方法到底有沒有用，我們還得再來調教一下VSCODE
來看看下個步驟如何解決這個問題。
---
三、在VSCODE使用語法檢查器
===
Stylelint
---
會出現這個Lint Warn的主要原因是內建的語法檢查並沒有支援這種規則
還記得剛才我們安裝過的Stylelint嗎?
現在就來安裝VSCODE專用的外掛。
安裝好後，開啟VSCODE的偏好設定，打開settings.json
將以下三個指令貼上去：
```json=
"css.validate": false,
"less.validate": false,
"scss.validate": false,
```
這指令就是用來關閉預設的CSS、Less、Scss檢查器，所有跟Style相關的語法檢查交給Stylelint。
回去看剛才編輯過後的style.scss
不但警告消失了，使用Tailwind CSS的樣式也會有語法提示！
---
根據前端社團內其他先進的意見
假如你不想使用Stylelint也可以直接安裝以下兩個套件來搞定，不一定要關閉預設的檢查器
Tailwind CSS IntelliSense
---
PostCSS Language Support
---
裝好後記得再到VSCODE的設定把SCSS的這個選項改為ignore
如果你非常討厭落落長的CSS Class Name出現在HTML上
要保持以往的Scss寫作模式，又心癢癢想玩玩看很夯的Tailwind
不妨試試這個方法吧！
アーニャ！わくわくっ！！
---
###### tags: `vite` `tailwind` `scss`
Sign in with Wallet
Connect another wallet