TailwindCSS 實用技巧合集

2024年9月6日#tailwindcss #css19

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

Tailwind CSS IntelliSens是一個VSCode插件，提供語法提示和自動補全，為必裝插件。常見問題包括： 1. 需要空格才能觸發自動補全，可在.vscode/settings.json中添加以下配置解決： ```json "editor.quickSuggestions": { "strings": true } ``` 2. 自定義自動補全觸發時機，默認在寫className時觸發，若封裝className可在settings.json中配置： ```json "tailwindCSS.experimental.classRegex": ["cn\\((*)\\)", "[\"'[\"']"] ``` 更多自定義規則可參考：https://github.com/paolotiu/tailwind-intellisense-regex-list#classnames 效果示例如圖所示。

`Tailwind CSS IntelliSens`#

Tailwind CSS IntelliSens是一個VSCode插件，用來做語法提示和自動補全。屬於必裝插件。

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

把經常遇到問題羅列如下：

1、需要空格才能觸發自動補全#

.vscode/settings.json中如下配置，即可解決

"editor.quickSuggestions": {
  "strings": true
},

2、自定義自動補全觸發時機#

插件默認用戶在寫className=xxx的時候會觸發自動補全，但是有時候我們會把通用的className封裝起來，就比如說封裝到一個js對象裡面。可以在settings.json中通過配置 tailwindCSS.experimental.classRegex 來解決問題

"tailwindCSS.experimental.classRegex": [
  ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
]

更多的自定義規則可參考： https://github.com/paolotiu/tailwind-intellisense-regex-list#classnames

效果如下：