HackMD
Tailwind CSS + SCSS + Vite 環境建置
這個教學是以TailwindCSS 3.4版本為主
因為4.0開始已經不再支援SCSS或LESS，所以如果你有為了Design Token混用需要的話，只能多開一隻CSS檔案處理喔！
原因如下:
https://github.com/tailwindlabs/tailwindcss/issues/15716#issuecomment-2619593290
請查看最新的官方文件:
https://tailwindcss.com/docs/installation/using-vite
綱要：
本課程完整範例
原始碼請參閱：https://github.com/fortes1219/tailwind_feat_scss
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
什麼?! Tailwind可以寫在SCSS裡面??
你或許覺得意外，PostCSS為Base開發的Tailwind為何可以存在不同的預處理器中。
事實上Tailwind官方文件中提到了一件事：
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#安裝Vite並且建立一個基礎模板
不過這次開發環境中前端框架我們使用 Vue3.0 來測試
實際玩過 VanillaJS 環境也一樣可以，按照自己專案需求建立即可
現在從D:/web中來開個專案試試：
npm create vite@latest
過程中，專案命名為 tailwind_feat_scss
框架我們選擇 vue，別選到 vue-ts 就好，除非你專案上有特別需要 Typescript。
然後在終端機裡輸入指令來安裝幾個套件
安裝Sass
npm add -D sass
npm add -D sass-loader ## 如果你是webpack才需要loader，vite可以省略
Tailwind CSS & PostCSS & AutoPrefix
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
安裝PostCSS相關套件
npm install postcss-import
npm install postcss-nesting
生成 Tailwind CSS 和 PostCSS 的 Config 設定檔
npx tailwindcss init -p
這段指令會產生兩個檔案： tailwind.config.js 和 postcss.config.js
稍後我們再來進行Config的配置，先繼續往下安裝要用的套件
Stylelint
npm i --save-dev stylelint stylelint-config-standard
二、設定 Tailwind CSS 環境
配置設定檔
都安裝好後就打開tailwind.config.js 和 postcss.config.js
tailwind的設定檔比較簡潔，這裡可以按照你實際專案需要配置。
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{html, js, ts, vue}",
"./src/**/*"
],
theme: {
extend: {},
},
plugins: []
}
PostCSS的設定則是將剛才我們安裝過的相關套件引入，寫在plugins裡面
Vite 4以上版本
// 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
// 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環境，是否也會報出同樣的警告
npm run dev
咦? 看起來並沒有問題啊，@apply樣式也有被正確引用，但為什麼VSCODE上會出現Warning?
先別急著懷疑這些方法到底有沒有用，我們還得再來調教一下VSCODE
來看看下個步驟如何解決這個問題。
三、在VSCODE使用語法檢查器
Stylelint
會出現這個Lint Warn的主要原因是內建的語法檢查並沒有支援這種規則
還記得剛才我們安裝過的Stylelint嗎?
現在就來安裝VSCODE專用的外掛。
安裝好後，開啟VSCODE的偏好設定，打開settings.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
不妨試試這個方法吧！
アーニャ！わくわくっ！！
