vscode兼容stylelint+tailwindcss配置方法（防報錯均兼容）

前言
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 即可：

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

給最下面 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