技術標籤：Webcssatomic-cssvscodestylelinttailwind

前言

vscode 強迫症一般都會使用 stylelint 外掛去格式化自己的 css，但是這個外掛會和 tailwindcss 起衝突，原因是因為 stylelint 不認識 tailwind 的 at-rule 規則。

stylelint

如果你不是強迫症，可以選擇強迫症入門：

《 css 格式規範 stylelint 在 vscode 使用教程（ ctrl+s 自動智慧修復 ）》

tailwindcss

非常火的 atomic css 實現方案，Github 已達 36 k star ，36 k 是什麼概念， vue 3 也只有 20 k 。

這裡就不詳述了，具體可參看文件 ~

官方專案：tailwindlabs / tailwindcss

官方網站：tailwindcss

官方文件：tailwindcss-es-doc

Vscode 外掛：tailwindcss-intellisense

解決

預設情況你直接在 css 裡使用 tailwind 語法是會報錯的：

但是我們也不能把 stylelint 關了，也不能全域性汙染 stylelint 外掛配置，所以只需巧妙配置一個 工作區 stylelint config 即可：

1. Ctrl + shift + P 拉出控制行，輸入 open workspace 開啟工作區配置：
   

2. 給最下面 settings

   選項增加一個 stylelint.config 即可：

   	//...
   	"settings": {
   	    // ...
   	    "stylelint.config": {
   	      "extends": ["stylelint-config-standard"],
   	      "rules": {
   	        "at-rule-no-unknown": [
   	          true,
   	          {
   	            "ignoreAtRules"
    
   : [
   	              "tailwind",
   	              "layer",
   	              "apply",
   	              "variants",
   	              "responsive",
   	              "screen"
   	            ]
   	          }
   	        ],
   	      }
   	    }
   	  }
   

即忽略了目前 6 個 tailwind 的 at-rule 語法（ Functions & Directives ）

由此一來，我們可以順利使用 css component 的 tailwind，同時支援 ctrl + s 自動修復：

當然，不推薦這麼用 tailwind ，因為這樣雖然你寫的是 atomic ，但 class 還是不會拆解，丟失了 atomic 。

其他

• vscode styleint 外掛更多配置：vscode-stylelint

• stylelint > at-rule-no-unknown 選項說明：at-rule-no-unknown

• stylelint 更多規則配置：List of rules

• vscode workspace：Multi-root Workspaces

• tailwindcss base reset 規範：sindresorhus / modern-normalize