[Tailwind] postcss

透過postcss去編譯出css檔案

通常我們有使用vite的情況下，vite會幫我們去監控整個檔案，所以css的編譯不用我們特別去處理。

但是如果在沒有使用vite的時候，我們在設定完tailwind.config.js檔中的content後，會先使用一個指令，讓我們輸出一隻output.css檔案，接著才將該output.css檔案用link:css的形式引入我們需要使用taiiwind css樣式的html中。指令如下：

npx tailwindcss -i ./assets/css/main.css -o ./dist/output.css --watch

這邊需要指定好輸入輸出的路徑，需要依據專案的資料夾結構去調整

-i ./assets/css/main.css:
- -i代表input的css檔案，我們會指定到主要的css 而該css中則會包含@tailwind base;，@tailwind components;，@tailwind utilities; 以及我們的一些@layer客製化設定等等
-o ./dist/output.css:
- -o代表output輸出，指定要輸出的css的路徑以及檔案名稱

這個指令會監測每個在tailwind.config.js中content所指定的檔案，如果監測的檔案有任何tailwind css的增減，則會動態的調整輸出css的樣式。
這樣才不會造成css檔案過度肥大，只在有需要使用到的時候將它編譯出來。

引用自六角學院tailwind筆記，如有不妥請告知～

編譯範例

在html檔內輸入如下

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>doc</title>
</head>
<body>
  <h1 class="text-blue-500 text-xl">我是h1</h1>
  
  <script type="module" src="../main.js"></script>
</body>
</html>

編譯過後的css
.text-xl{
  font-size:1.25rem;
  line-height:1.75rem;
}
.text-blue-500{
  --tw-text-opacity:1;
  color:rgb(59 130 246 /var (--tw-text-opacity
  ));
}

因為只有使用到text-xl跟text-blue-500所以會保留這兩樣，前面就是一些base等等的樣式

接著我們新增了underline之後會發現terminal有重新編譯的提示…

新增underline後的index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>doc</title>
</head>
<body>
  <h1 class="text-blue-500 text-xl underline">我新增了underline</h1>
  
  <script type="module" src="../main.js"></script>
</body>
</html>

新增underline之後編譯過後的css
.text-xl{
  font-size:1.25rem;
  line-height:1.75rem;
}
.text-blue-500{
  --tw-text-opacity:1;
  color:rgb(59 130 246 /var (--tw-text-opacity
  ));
}
.underline{
  text-decoration-line: underline;
}

刪除的class也會反應在編譯過後的檔案上嗎？

需要注意好像只有新增的css會被動態的加入output css檔案中，如果是刪除沒有使用到的，還是會留在編譯過後的css內

除非關掉指令(ctrl+c)並且重新開啟指令之後，就會重新編譯*（應該算是覆蓋掉才對）*

[Tailwind] postcss

透過postcss去編譯出css檔案​

編譯範例​

透過postcss去編譯出css檔案

編譯範例