TailwindCSS 实用技巧合集

2024年9月6日#tailwindcss #css20

AI 生成的摘要

Tailwind CSS IntelliSens是一个VSCode插件，用于提供语法提示和自动补全，是必装插件。常见问题包括： 1. 需要空格才能触发自动补全，可以在.vscode/settings.json中添加配置： ```json "editor.quickSuggestions": { "strings": true } ``` 2. 自定义自动补全触发时机，默认在写className时触发，若将className封装在js对象中，可通过配置`tailwindCSS.experimental.classRegex`解决： ```json "tailwindCSS.experimental.classRegex": ["cn\\((*)\\)", "[\"'[\"']"] ``` 更多自定义规则可参考：[GitHub链接](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

效果如下：