TailwindCSS 実用テクニック集

2024年9月6日#tailwindcss #css249

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

Tailwind CSS IntelliSensは、VSCode用の必須プラグインで、文法のヒントや自動補完を提供します。よくある問題とその解決策は以下の通りです。 1. 自動補完をトリガーするために空白が必要な場合、`.vscode/settings.json`に以下の設定を追加します。 ```json "editor.quickSuggestions": { "strings": true } ``` 2. 自動補完のトリガータイミングをカスタマイズするには、`settings.json`で`tailwindCSS.experimental.classRegex`を設定します。 ```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

効果は以下の通りです：