TailwindCSS Practical Tips Collection

Sep 6, 2024#tailwindcss #css116

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

Tailwind CSS IntelliSens is a VSCode plugin for syntax highlighting and auto-completion, considered essential for Tailwind CSS development. Key issues include needing a space to trigger auto-completion, which can be resolved by adding `"editor.quickSuggestions": { "strings": true }` to `.vscode/settings.json`. Additionally, to customize when auto-completion triggers, especially when using class names in JavaScript objects, you can configure `tailwindCSS.experimental.classRegex` in `settings.json`. More customization options are available at the provided GitHub link.

`Tailwind CSS IntelliSens`#

Tailwind CSS IntelliSens is a VSCode plugin used for syntax hints and auto-completion. It is an essential plugin.

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

The common issues encountered are listed as follows:

1. A space is needed to trigger auto-completion#

The following configuration in .vscode/settings.json can solve this issue:

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

2. Customizing the trigger for auto-completion#

By default, the plugin triggers auto-completion when the user writes className=xxx, but sometimes we encapsulate common classNames, for example, into a js object. This can be resolved in settings.json by configuring tailwindCSS.experimental.classRegex:

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

For more custom rules, please refer to: https://github.com/paolotiu/tailwind-intellisense-regex-list#classnames

The effect is as follows: