Tailwind CSS + SCSS + Vite 環境建置 === 綱要: [TOC] 本課程完整範例 --- 原始碼請參閱:https://github.com/fortes1219/tailwind_feat_scss ![](https://i.imgur.com/4AVRSIY.jpg) 什麼?! 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裡面 ```javascript= // postcss.config.js module.exports = { plugins: [ require('postcss-import'), require('tailwindcss/nesting')(require('postcss-nesting')), require('tailwindcss'), require('autoprefixer'), ] } ``` 在專案中引入Tailwind CSS --- ![](https://i.imgur.com/VOvhyo4.png) 我們在style.scss中就可以將base、components、utillities三個library透過import指令導入,建議在你自有的其它scss檔後面引入。 ![](https://i.imgur.com/WyAidjQ.png) 再到main.js的表頭import這支style.scss 接著我們可以嘗試寫點東西,在App.vue的template上寫一個命名為box的class包覆。 ![](https://i.imgur.com/ABPIhMW.png) 樣式的配置,使用Tailwind中常用來組合樣式的 **@apply** 指令試試。 ![](https://i.imgur.com/4Jlt3j6.png) ==**......居然會噴個未知的rule警告?!**== ![](https://i.imgur.com/7Re2gAZ.png) 我們試試看啟動Vite環境,是否也會報出同樣的警告 ```bash= npm run dev ``` ![](https://i.imgur.com/YiXaJwE.png) ![](https://i.imgur.com/OQzXixG.png) 咦? 看起來並沒有問題啊,@apply樣式也有被正確引用,但為什麼VSCODE上會出現Warning? 先別急著懷疑這些方法到底有沒有用,我們還得再來調教一下VSCODE 來看看下個步驟如何解決這個問題。 --- 三、在VSCODE使用語法檢查器 === Stylelint --- ![](https://i.imgur.com/pXz3N9C.png) 會出現這個Lint Warn的主要原因是內建的語法檢查並沒有支援這種規則 還記得剛才我們安裝過的Stylelint嗎? 現在就來安裝VSCODE專用的外掛。 ![](https://i.imgur.com/RMWyoP9.png) 安裝好後,開啟VSCODE的偏好設定,打開settings.json 將以下三個指令貼上去: ```json= "css.validate": false, "less.validate": false, "scss.validate": false, ``` 這指令就是用來關閉預設的CSS、Less、Scss檢查器,所有跟Style相關的語法檢查交給Stylelint。 ![](https://i.imgur.com/5sv1rCQ.png) 回去看剛才編輯過後的style.scss 不但警告消失了,使用Tailwind CSS的樣式也會有語法提示! --- 根據前端社團內其他先進的意見 ![](https://i.imgur.com/c2l8Sal.png) 假如你不想使用Stylelint也可以直接安裝以下兩個套件來搞定,不一定要關閉預設的檢查器 Tailwind CSS IntelliSense --- ![](https://i.imgur.com/u18nDN1.png) PostCSS Language Support --- ![](https://i.imgur.com/bHP7ytU.png) 裝好後記得再到VSCODE的設定把SCSS的這個選項改為ignore ![](https://i.imgur.com/wWo5hYz.png) 如果你非常討厭落落長的CSS Class Name出現在HTML上 要保持以往的Scss寫作模式,又心癢癢想玩玩看很夯的Tailwind 不妨試試這個方法吧! ![](https://i.imgur.com/x7W5ad7.png) アーニャ!わくわくっ!! --- ###### tags: `vite` `tailwind` `scss`