分享

Tailwind CSS 安裝篇

Using Tailwind with PostCSS ,因此要先去利用工具完成初始設定。
parcel.js首頁:https://parceljs.org/ 
右上角可以改成繁體中文
Getting Started
找到  createapp.dev  的連結點下去
TailwindCSS Parcel.js
可以找到 Tailwind CSS 的選項,選好左下角可以下載,之後拖到 VSCode 的工作區就好了。
Tailwind CSS 的優勢就是他有大量的工具用 CSS ,例如  bg-orange-300 。
但我們怎麼記得住如此多的工具簡寫,因此需要提示套件 Tailwind CSS IntelliSense ,在 TailwindCSS 官網或是 VSCode 擴充套件的地方搜尋安裝即可,但有一個須注意的地方。
In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.js in your workspace. 
就是這個套件需要偵測到工作區有 tailwind.config.js 或 tailwind.js 才會生效,所以必須要再添加 tailwind.config.js 
  

npx tailwindcss init 

這種 CSS 處理方法通常會有檔案肥大的問題,可以再利用清除未使用的 CSS 來解決,可以從數 MB 降到數 KB 之多,此處暫且略過。
最後改好直接儲存檔案是不會生效的,必須經過編譯的過程。
Build 指令
  

 npx tailwindcss build styles.css -o output.css 

style.css 是編輯前使用的css檔 , output.css 是編譯完的檔案。
只要讓HTML檔加上
  

<link rel="stylesheet" href="output.css">

就大功告成。
以下截至 Tailwind CSS IntelliSense Github 文件,只要有 tailwind.config.js ,剩下重開VSCode或單純開一下 tailwind.config.js 讓VSCode偵測應該都可以解決。

故障排除

如果您在激活IntelliSense功能時遇到問題,可以檢查以下幾件事:
  • 確保您的工作區中有一個Tailwind配置文件,並且命名為tailwind.config.jstailwind.js。請查閱Tailwind文檔以獲取有關創建配置文件的詳細信息。
  • 確保tailwindcss模塊安裝在您的工作空間,通過npmyarnpnpm。Tailwind CSS IntelliSense當前不支持Yarn Plug'n'Play。
  • 如果tailwindcss在Visual Studio Code中已經打開項目的同時安裝或創建了配置文件,則可能需要重新加載編輯器。您可以完全重新啟動VS Code,Developer: Reload Window也可以使用可以在命令面板中找到的命令。
參考資料: 
tailwindcss 超入門 - #1 安裝及使用  Mike Cheng https://youtu.be/1FD0suYWXeM
parceljs 官網 https://parceljs.org/
tailwindcss 官網 https://tailwindcss.com/
#TailwindCSS 
分類:學習

正在轉職前端工程師路上努力的人。使用 Vue.js 為主,正在學習 TailwindCSS 以及 Nuxt.js 。

評論
更多文章
載入中... 沒有更多了