On some project (too many files) intellisense doesn't work

[Kcko]

What version of Tailwind CSS IntelliSense are you using?

Latest

What version of Tailwind CSS are you using?
Latest of version 2

What package manager are you using?
npm

What operating system are you using?
Windows 10

Describe your issue
Hi,

Sometimes whispering doesn't work for me. I can't figure out why. It happens with bigger projects. I don't know how to detect it, how to debug it?

I can't work with TW at all without whispering.

Here is a short video https://bit.ly/3eVzMPt

I have set all exclude folders.

Sometimes it works, sometimes it doesn't, how to detect it? :(

Thank you.

[bradlc]

Hey @Kcko, are you able to share your project?

[Kcko]

Hey @Kcko, are you able to share your project?

Thx for fast reply. Its not a possible, its private paid project.

But I can provide all outputs you ask for.

Please tell me what is needed and I will try to prepare / show everything.

I can't work without this plugin ❤️️

[Kcko]

My friend from another company tells me that it doesn't work for him either.
Maybe some problem with latest version of VSC?

[imichall]

Hi there,

I can confirm the issue with intellisense doesn't work.

[bradlc]

Thx for fast reply. Its not a possible, its private paid project.

Ok no problem! Do you see anything in the output panel? (Tailwind CSS: Show Output command)

[Kcko]

Nothing? https://bit.ly/3Bp5o7w

No Tailwind CSS in list - https://bit.ly/3QP9OdN

[bradlc]

Ah I see. If you cannot see the command at all that means that the extension cannot find your Tailwind config file. Some things to check:

• Check you have a tailwind.config.js or tailwind.config.cjs file in your project
• Check that the config file is not excluded via settings like files.exclude

[Kcko]

Ah I see. If you cannot see the command at all that means that the extension cannot find your Tailwind config file. Some things to check:

• Check you have a tailwind.config.js or tailwind.config.cjs file in your project
• Check that the config file is not excluded via settings like files.exclude

Yes, i have of course :-) https://bit.ly/3QNdT26
Here is configuration:

const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')

module.exports = {
  //important: '#awbackapp',
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwind-bootstrap-grid')({
      containerMaxWidths: {
        sm: '540px',
        md: '720px',
        lg: '960px',
        xl: '1140px',
        xxl: '1320px'
      }
    }),
    require('tailwindcss-debug-screens'),
    plugin(function ({ addVariant }) {
      addVariant('important', ({ container }) => {
        container.walkRules((rule) => {
          rule.selector = `.\\!${rule.selector.slice(1)}`
          rule.walkDecls((decl) => {
            decl.important = true
          })
        })
      })
    })
  ],
  corePlugins: {
    // ...
    container: false
  },
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: {
    content: [
      './app/**/*.latte',
      './app/**/*.php',
      './webapp/**/*.vue',
      './webapp/**/*.js',
      './vendor/andweb/**/*.php',
      './vendor/andweb/**/*.latte',
      './node_modules/nette-base-module/**/*.js',
      './node_modules/nette-base-module/**/*.vue',
      './node_modules/nette-back-module/**/*.js',
      './node_modules/nette-back-module/**/*.vue',
      './node_modules/nette-crm-module/**/*.js',
      './node_modules/nette-crm-module/**/*.vue',
      './node_modules/nette-front-module/**/*.js',
      './node_modules/nette-front-module/**/*.vue',
      './node_modules/nette-media-module/**/*.js',
      './node_modules/nette-media-module/**/*.vue'
    ],
    safelist: [/^col-[0-9]*$/, /^[a-z]*:col-[0-9]*$/]
  },
  theme: {
    extend: {
      colors: {
        primary: colors.indigo[500],
        secondary: colors.gray[500],
        success: colors.green[500],
        danger: colors.red[500],
        warning: colors.orange[500],
        info: colors.blue[500],
        orange: colors.orange,
        gray: colors.blueGray,
        // AMBI
        'ambi-orange': '#FF5A00',
        'ambi-red': '#C8102E',
        'ambi-green': '#38d430',
        'ambi-green-dark': '#2daa26',
        'ambi-red-dark': '#9F000F',
        'ambi-gray': '#FCFCFC',
        'ambi-gray-dark': '#f3f3f3',
        'border-common': '#D2D1D0',
        'button-secondary-border': '#D2D1D0',
        'divider-dark': '#D2D1D0',
        divider: '#0000001a'
      },
      borderWidth: {
        1: '1px'
      },
      minWidth: {
        50: '50px'
      },
      minHeight: {
        '80vh': '80vh',
        '70vh': '70vh'
      }
    },
    fontFamily: {
      'america-r': ['america-r'],
      'america-m': ['america-m'],
      'america-b': ['america-b']
    },
    screens: {
      // bootstrap grid
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1400px'
    },
    btnColors: {
      yellow: '"yellow"',
      green: '"green"',
      blue: '"blue"',
      indigo: '"indigo"',
      purple: '"purple"',
      pink: '"pink"',
      // bootstrap
      primary: '"indigo"',
      secondary: '"gray"',
      success: '"green"',
      danger: '"red"',
      warning: '"orange"',
      info: '"blue"'
    }
    /*
    spacing: { // bootstrap spacing
      '0': '0px',
      'px': '1px',
      '1': '0.25rem', // 4px
      '2': '0.5rem', // 8px
      '3': '1rem', // 16px
      '4': '1.5rem', // 24px
      '5': '3rem', // 48px
      'auto': 'auto', // 24px
    }
    */
  },
  variants: {
    extend: {
      zIndex: ['responsive', 'hover', 'group-hover'],
      display: ['responsive', 'hover', 'group-hover'],
      backgroundOpacity: [
        'responsive',
        'group-hover',
        'focus-within',
        'hover',
        'focus',
        'important'
      ],
      margin: ['important'],
      padding: ['important'],
      textAlign: ['important'],
      borderRadius: ['important']
    }
  }
}

And my exclude list

{
  "exclude": [
    ".git",
    ".git/*",
    "vendor",
    ".app-cache",
    ".npm",
    "www",
    "www/*",
    ".npm-tmp",
    "dist",
    "dist*",
    "temp/*",
    "node_modules",
    "node_modules/*",
    "subfolder/dist",
    "subfolder/node_modules",
    "**/dist/*",
    "**/node_modules/*"
  ]
}

My friend told me that doesnt work for him after update to latest version of VSC, could you test it? Its work for you? (No suggestion in CSS/SCSS and HTML too ...)

[bradlc]

What does your full VS Code settings JSON look like?

[Kcko]

Here

{
    "sublimeTextKeymap.promptV3Features": true,
    "php.suggest.basic": false,
    "emmet.triggerExpansionOnTab": true,
    "editor.tabCompletion": "on",
    "path-intellisense.autoSlashAfterDirectory": false,
    "editor.fontSize": 14,
    "emmet.includeLanguages": {
        "latte": "html",
        "vue-html": "html",
        "vue": "html"
    },
    "search.useIgnoreFiles": false,
    "html-css-class-completion.includeGlobPattern": "**/*.{css,html,scss,php,latte,vue}",
    "fileHeaderComment.template": {
        "*": [
            "${commentbegin} ${date}${time} <RJ> ${commentend}"
        ]
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/temp": true
    },
    "explorer.confirmDelete": false,
    "php.validate.enable": false,
    "emmet.excludeLanguages": [
        "markdown",
        "php"
    ],
    "emmet.syntaxProfiles": {
        "html": "xhtml"
    },
    "html-css-class-completion.enableScssFindUsage": false,
    "html-css-class-completion.enableFindUsage": false,
    "fontAwesomeAutocomplete.patterns": [
        "**/*.html",
        "**/*.latte"
    ],
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "terminal.integrated.env.windows": {
        "CMDER_ROOT": "C:\\Cmder"
    },
    "terminal.integrated.shellArgs.windows": [
        "/k",
        "%CMDER_ROOT%\\vendor\\bin\\vscode_init.cmd"
    ],
    "todo-tree.tree.showScanModeButton": false,
    "typescript.suggest.enabled": false,
    "javascript.suggest.includeAutomaticOptionalChainCompletions": false,
    "javascript.suggest.completeFunctionCalls": true,
    "editor.suggestSelection": "first",
    "sync.gist": "a353bd503fc7117d2df311cfc43d75bb",
    "workbench.startupEditor": "newUntitledFile",
    "editor.codeActionsOnSave": null,
    "tailwindCSS.includeLanguages": {
        "scss": "css",
        "latte": "html"
    },
    "tailwindCSS.validate": false,
    "tailwindCSS.emmetCompletions": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.renderWhitespace": "selection",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "prettier.singleQuote": true,
    "vetur.format.options.useTabs": true,
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "indent_size": 4,
            "indent_with_tabs": true,
            "wrap_attributes": "force-expand-multiline",
            "wrap_attributes_indent_size": 4
        }
    },
    "whiteviz.enabled": false,
    "notebook.kernelProviderAssociations": [],
    "workbench.colorTheme": "Monokai ST3",
    "prettier.tabWidth": 4,
    "headwind.runOnSave": false,
    "beautify.config": {
        "max_preserve_newlines": 1,
        "newline_between_rules": true,
        "space_around_combinator": true
    },
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "less",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "latte"
        ]
    },
    "prettier.proseWrap": "never",
    "prettier.printWidth": 8000,
    "security.workspace.trust.untrustedFiles": "open",
    "redhat.telemetry.enabled": false,
    "html.format.wrapAttributes": "force-expand-multiline",
    "editor.formatOnType": true,
    "splitHTMLAttributes.closingBracketOnNewLine": false,
    "todo-tree.filtering.excludeGlobs": [
        "**/node_modules",
        "**/node_modules/*"
    ],
    "window.zoomLevel": 0.15,
    "svg.preview.mode": "svg",
    "settingsSync.ignoredExtensions": [],
    "editor.bracketPairColorization.enabled": false,
    "[php]": {
        "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
    },
    "prettier.arrowParens": "avoid",
    "php.format.codeStyle": "Off",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "tailwindCSS.files.exclude": [
        "**/.git/**",
        "**/node_modules/**",
        "**/.hg/**",
        "**/temp/**"
    ]
}

[Kcko]

Further research, if I install the via https://tailwindcss.com/docs/installation the base skelet , everything works and whispers.

Why the heck can it be that your extension won't start for a larger project? It is not a VSC setting.

How to find a way to detect / debug it?

https://bit.ly/3xwynoR

I move default tailwind.config.js to my "big" project - no change, its a solid mystery.

Is there any way, how to check why TW extension cannot be loaded?

[Kcko]

I figured it out!

I have to rename tailwind.config.js to some nonsense name (I added .xxx extension) and wait a while and then rename it back to the original name and wait and then the extension will load.

I take it as a temporary solution. Could it be fixed somehow? Or what is it?

2 min video with a complete procedure (https://bit.ly/3ROVPG3)

[schickling]

I take it as a temporary solution. Could it be fixed somehow? Or what is it?

Was running into the same issue. Worked for me but should be fixed in the extension.

Note: The extension worked in the past for me. I didn't change anything about my TW setup.

[Kcko]

I can live with this workaround, (its better than nothing, beucase it works!), but im missing some explanation from author of plugin.

[jlongo]

I have a similar problem, on files with ".htm" extension (laravel pages/partials), intellisense is not working at all, but if i rename the file extension to "html" it will start to work. Someone know some workarround or config for this type of file extension ? Just a simple project where css gets generated normally. Tailwind.config.js is the default with conten[] for files to parse and theme[] changed fontfamily.

Windows 11 and
Version: 1.72.2 (system setup)
Commit: d045a5eda657f4d7b676dedbfa7aab8207f8a075
Date: 2022-10-12T22:15:18.074Z
Electron: 19.0.17
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Windows_NT x64 10.0.25217
Sandboxed: No