Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why Tailwind CSS IntelliSense isn’t working with a CDN link?

No suggestions were coming up in the HTML files.

I tried re-installing the Tailwind CSS IntelliSense extension and tweaking some settings in the `settings.json` file related to the extension. However, the suggestions still didn’t show up. I was expecting these changes to fix the issue, but IntelliSense remained unresponsive.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    There’s only one reason why your Tailwind CSS IntelliSense might not be working:

    TailwindCSS IntelliSense doesn’t know that your project is using TailwindCSS.

    How does IntelliSense know that your project is using Tailwind? By the presence of a tailwind.config.js file. If this file is in your project’s root directory (or any relevant directory), IntelliSense will start working, and you'll get suggestions wherever you're using Tailwind.

    My Experience:

    In my case, I was working on a project using Parcel + React + Tailwind, and everything worked fine because the project was configured correctly following the TailwindCSS framework guides.

    However, when I tried using Tailwind via a CDN link, without a tailwind.config.js file, this is what I experienced:

    before tailwind.config.js

    As you can see, no suggestions were showing up because IntelliSense didn’t know it had to provide suggestions for Tailwind CSS.

    Next, I created a tailwind.config.js file in the project:

    after adding tailwind.config.js

    After adding the file, I immediately started getting suggestions!

    Note: The tailwind.config.js file is completely empty.

    Conclusion

    Even if your configuration is empty, having the tailwind.config.js file is essential for enabling Tailwind CSS IntelliSense.


  2. 0

    Tailwind CSS IntelliSense typically works in development environments like VSCode when using a tailwind.config.js file, but it does not work when using a CDN link. To enable IntelliSense, you can install Tailwind locally by running npm install tailwindcss, and then generate the configuration file with npx tailwindcss init. After that, IntelliSense will be work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search