Intellisense Not Firing in Files Nested in Project Directories (siblings to the Webpack root)

[cameronsb]

What version of Tailwind CSS IntelliSense are you using?

For example: v0.9.6

What version of Tailwind CSS are you using?

For example: v3.2.4

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {

    // note: these paths are relative to where the postcss.config.js file is located
    content: [
        './src/admin/js/**/*.js', // all admin JS files
        '../application/views/layouts/**/*.{html,php}', // all admin pages
        '../application/views/pages/**/*.{html,php}', // all admin pages
    ],

    theme: {
        extend: {
            colors: {
                transparent: 'transparent',
                current: 'currentColor',
            },
        },
    },
    plugins: [],
    corePlugins: {
        preflight: false, // disable tailwind's default styles
    },
};

VS Code settings

{
   ...

    "files.associations": {
        "*.css": "tailwindcss"
    },
    "tailwindCSS.emmetCompletions": true,
    "editor.quickSuggestions": {
        "strings": true
    }
}

Reproduction URL

I'll see if I can get this up.

Describe your issue

We have a CodeIgniter instance running, and there is also a Webpack folder where we house all of our build configs.

The folder structure looks like this (with many folders removed here for brevity):

- local-installer
- application
    ...
    - views
        ...
        - pages
            - example.php
...
- webpack
    ...
    - src
        - admin
            ...
            - tailwind
                ...
                - tailwind.config.js
    - webpack.config.js
    - postcss.config.js

My main issue is that I can't get Intellisense to work on any files in application/views. My guess is that it's too far-removed from the directory where Webpack is operating from. I've recently tried to pull all of the configs out into the project root and update all of the relative paths for the build to work, but that didn't help either.

I'm wondering if there's anything I'm doing wrong, or if this is simply out of the scope of the extension's capabilities.

I have been touting Tailwind's benefits to our organization and even started to build out components, but if I can't get Intellisense working in our primary directory, we may need to abandon the idea for now :(

Let me know if you need any extra information. Thank you.

[bradlc]

Hey @cameronsb. A GitHub repository that reproduces the issue would really help with debugging this if you're able to share one. Having said that I have an inkling of what it might be. Do you have a package.json file in the webpack folder?

[cameronsb]

Hey @bradlc - yes, there's a package.json in the webpack folder.

Also, I've just updated the folder structure I provided, since it had inaccuracies. Not sure if that helps.

I'll continue to try for a repo recreation today.

[bradlc]

This should be fixed in v0.9.7 but let me know if it isn't 👍

[cameronsb]

@bradlc You're a legend - this solved the primary issue. Thank you.

I have one remaining problem, which may be solvable with configuration tweaks ( looking into this currently ).

Many of our files are using AngularJS, so the markup is wrapped in a script tag like below:

<div id="example">
  <!-- TW Intellisense works here -->
</div>
 
<script id="page-template" type="text/ng-template">
  // markup here does not trigger TW Intellisense
</script>

Unfortunately it's not firing for markup within a <script> tag, but I would imagine that this may be configurable in some way.

If not, I can create another issue, but please let me know if you're aware of a workaround for this. I'll update if I find the solution.

Thanks for your help!

[cameronsb]

On second thought, I've found a way around the secondary issue with PHP's include() method, so I'm good for now.

Thanks again @bradlc