blocks|key|313116|text|按以下方式编辑您的settings.json：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|313117|{
++//+other+settings
++"tailwindCSS.includeLanguages":+{
++++"javascript":+"javascript",
++++"html":+"HTML"
++},
++"editor.quickSuggestions":+{
++++"strings":+true
++}
}|code-block|syntax|javascript|313118|entityMap^0|9|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Edit your <code>settings.json</code> as below:
<pre class="lang-json prettyprint-override"><code>{
 // other settings
 &quot;tailwindCSS.includeLanguages&quot;: {
 &quot;javascript&quot;: &quot;javascript&quot;,
 &quot;html&quot;: &quot;HTML&quot;
 },
 &quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
 }
}
</code></pre>

blocks|key|315067|text|--这里是如何让Tailwind处理React文件|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|315068|转到尾风CSS设置并添加Javascript支持"tailwindCSS.includeLanguages":+{+"plaintext":+"javascript"+}|ordered-list-item|CODE|315069|重装vscode|315070|如果这不能解决问题，那么在添加类名之前尝试使用ctrl+%2B+space。|315071|查看尾风设置的图像|315072|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/1Rn9G.png^0|0|P|0|O|1P|0|0|N|C|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@$9|11|A|12|B|I]]|D|@]|E|$]]|$1|J|3|K|5|H|7|13|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|14|8|@$9|15|A|16|B|I]]|D|@]|E|$]]|$1|N|3|O|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|P|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

Here's how to get Tailwind Intellisense to work with React files
<ol>
<li>Go to Tailwind CSS settings and add Javascript support <code>&quot;tailwindCSS.includeLanguages&quot;: { &quot;plaintext&quot;: &quot;javascript&quot; }</code></li>
<li>Reload vscode</li>
</ol>
If this doesn't fix things, try using <code>ctrl + space</code> before adding a class name.
<a href="https://i.stack.imgur.com/1Rn9G.png" rel="noreferrer">View image of Tailwind settings</a>

blocks|key|313111|text|即使在配置了tailwindCSS.includeLanguages设置之后，我也面临着这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|313112|因此，请确保您还配置了以下设置，以允许在字符串中提供建议。|313113|"editor.quickSuggestions":+{
++++"strings":+true
}|code-block|syntax|javascript|313114|entityMap^0|6|S|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I faced this issue even after configuring <code>tailwindCSS.includeLanguages</code> settings.
So make sure you configure the below settings as well to allow suggestions inside a string.
<pre><code>&quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
}
</code></pre>

blocks|key|315077|text|将其添加到setting.json文件的末尾，以便在HTML文件上获得IntelliSense|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315078|"tailwindCSS.includeLanguages":+{
++++"javascript":+"javascript",
++++"html":+"HTML"
++},|code-block|syntax|javascript|315079|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add this at the end of your setting.json file in order to get IntelliSense on both HTML and js file
<pre><code>&quot;tailwindCSS.includeLanguages&quot;: {
 &quot;javascript&quot;: &quot;javascript&quot;,
 &quot;html&quot;: &quot;HTML&quot;
 },
</code></pre>

blocks|key|315081|text|尝试删除"tailwind.config.js“并再次创建它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315082|npx+tailwindcss+init|code-block|syntax|javascript|315083|它应该开始起作用了。|315084|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try to delete the &quot;tailwind.config.js&quot; and create it back again with
<pre><code>npx tailwindcss init
</code></pre>
and it should start working.

blocks|key|168729|text|两者结合在一起为我工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168730|+++"tailwindCSS.includeLanguages":+{
++++++++"javascript":+"javascript",
++++++++"html":+"HTML"
++++++},|code-block|syntax|javascript|168731|和|168732|尝试删除"tailwind.config.js“并再次创建它|168733|npx+tailwindcss+init|168734|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Both combined worked for me.
<pre><code> &quot;tailwindCSS.includeLanguages&quot;: {
 &quot;javascript&quot;: &quot;javascript&quot;,
 &quot;html&quot;: &quot;HTML&quot;
 },
</code></pre>
and
Try to delete the &quot;tailwind.config.js&quot; and create it back again with
<pre><code>npx tailwindcss init
</code></pre>

blocks|key|1117815|text|您必须包含要在tailwind.config.js文件中使用尾风CSS的文件。你可以替换：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1117816|content:+[],|code-block|syntax|javascript|1117817|使用|1117818|content:+["*"],|1117819|它将包括项目中的所有文件。保存它，现在尾风CSS+IntelliSense将弹出建议。|1117820|entityMap^0|7|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

You have to include the files, in which you want to work with Tailwind CSS in your tailwind.config.js file.
You can replace:
<pre><code>content: [],
</code></pre>
with
<pre><code>content: [&quot;*&quot;],
</code></pre>
It will include all files in your project. Save it and now the Tailwind CSS IntelliSense will popup the suggestions.

blocks|key|168837|text|我也有过同样的问题。我卸载了Tailwind，然后重新安装它。问题解决了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168838|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I had the same issue. I uninstalled Tailwind CSS IntelliSense, then reinstalled it back. And the problem was solved.

blocks|key|168800|text|在VSCode的settings.json文件中放置以下片段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168801|"tailwindCSS.emmetCompletions":+true,+//+remove+this+line+if+you+don't+use+Emmet
"editor.inlineSuggest.enabled":+true,
"editor.quickSuggestions":+{
+++"strings":+true
},
"css.validate":+false,|code-block|syntax|javascript|168802|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Placed the following snippit in VSCode’s settings.json file.
<pre><code>&quot;tailwindCSS.emmetCompletions&quot;: true, // remove this line if you don't use Emmet
&quot;editor.inlineSuggest.enabled&quot;: true,
&quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
},
&quot;css.validate&quot;: false,
</code></pre>

blocks|key|313152|text|添加到settings.json|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|313153|你可以打开|313154|cmd+%2B+shift+%2Bp+=>+Prefence:打开设置(JSON)|blockquote|313155|"tailwindCSS.includeLanguages":+{
++++"javascript":+"javascript",
++++"javascriptreact":+"javascriptreact",
++++"typescript":+"typescript",
++++"typescriptreact":+"typescriptreact",
}|code-block|syntax|javascript|313156|entityMap^0|3|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|W|8|@]|D|@]|E|$N|O]]|$1|P|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|Q|$]]

Add to settings.json
You can open via
<blockquote>
cmd + shift + p =&gt; Prefences: Open Settings (JSON)
</blockquote>
<pre><code>&quot;tailwindCSS.includeLanguages&quot;: {
 &quot;javascript&quot;: &quot;javascript&quot;,
 &quot;javascriptreact&quot;: &quot;javascriptreact&quot;,
 &quot;typescript&quot;: &quot;typescript&quot;,
 &quot;typescriptreact&quot;: &quot;typescriptreact&quot;,
}
</code></pre>

blocks|key|168859|text|这次尾风的最后一个版本是3.2.1，看起来这个版本和vsCode或IntelliJ的最后一个版本不匹配，所以我把顺风降到了3.1.8+(npm+i+tailwindcss@3.1.8)，然后男人们建议现在工作的方式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|168860|entityMap^0|1W|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

The last version of tailwindcss for this time is 3.2.1 and it seems this version is not matched with the last version of vsCode or IntelliJ IDEA so I downgraded tailwind to 3.1.8 (<code>npm i tailwindcss@3.1.8</code>) and then those ways that guys suggest work now

I created a ReactJS project using <code>create-react-project</code> command. I npm installed tailwindcss and created a tailwind.config.js file.
Now to make my life easier I also installed an extension called Tailwind CSS IntelliSense and reloaded VSCode. The extension still does not give suggestions in my JavaScript files.
At first, i thought it is maybe because it works only with html extensions or that the reactjs files uses <code>className</code> for adding CSS classes as class keyword is reserved. So, I tried to edit index.html file but not suggestions in HTML files as well.
Please tell what else can I tryout?

Tailwind CSS IntelliSense does not provide suggestions in a ReactJS project?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我使用ReactJS命令创建了一个create-react-project项目。I安装了tailwind.config.js裁剪器并创建了一个文件。现在，为了让我的生活更轻松，我还安装了一个名为Tailwind的扩展，并重新加载了VSCode。在我的JavaScript文件中，扩展名仍然没有给出建议。起初，我认为这可能是因为它只适用于html扩展，或者reactjs文件使用className添加C

问顺风CSS IntelliSense没有在ReactJS项目中提供建议？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风CSS IntelliSense没有在ReactJS项目中提供建议？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风CSS IntelliSense没有在ReactJS项目中提供建议？
EN