Skip to content

When using Tailwind CSS IntelliSense in VS Code making it very slow to provide autocomplete suggestions #1053

Closed
@giorgitchanturidze

Description

@giorgitchanturidze

VS Code v1.93.1

Tailwind CSS IntelliSense v0.12.10

Tailwind CSS v3.4.9

Package manager npm

Ubuntu 24.04.1 LTS

Tailwind config

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      screens: {
        'md': '680px',
        'lg': '1024px',
        'xl': '1400px',
        '2xl': '1600px',
      },
      fontFamily: {
        firago: ['FiraGO', 'sans-serif'],
        DMsans: ['DM Sans', 'sans-serif'],
      },
      fontSize: {
        s: ['13px', { lineHeight: '20px' }],
        '5xl': ['40px', { lineHeight: '56px' }],
      },
      borderRadius: {
        '4xl': '32px',
        '5xl': '20px',
      },
      boxShadow: {
        'custom-combined': '0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #0000001A',
      },
      colors: {
        swissRed: {
          '50': '#FFF4F4',
          '600': '#D92329',
        },
        swissGray: {
          '600': '#626161',
          '800': '#231F20',
        },
      },
    },
  },
  plugins: [],
}

VS Code settings

{
  "files.autoSave": "afterDelay",
  "workbench.iconTheme": "catppuccin-latte",
  "editor.inlineSuggest.enabled": true,
  "editor.linkedEditing": true,
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true,
    "scminput": false,
    "yaml": true,
    "twig": true,
    "html": true,
    "javascript": true
  },
  "editor.stickyScroll.enabled": true,
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 120,
  "editor.minimap.renderCharacters": true,
  "editor.minimap.showSlider": "always",
  "editor.minimap.side": "right",
  "editor.minimap.size": "proportional",
  "editor.wordWrap": "on",
  "tailwindCSS.includeLanguages": {
    "twig": "html",
    "css": "css",
    "js": "javascript"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false,
  "tailwindCSS.emmetCompletions": true,
  "markdown.updateLinksOnFileMove.enabled": "always",
  "editor.fontLigatures": true,
  "[python]": {
    "editor.formatOnType": true
  },
  "explorer.confirmDelete": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.autofetch": true,
  "liveServer.settings.donotVerifyTags": true,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code',  'Cascadia Code', 'Segoe UI', 'Courier New', monospace",
  "editor.guides.bracketPairs": false,
  "git.openRepositoryInParentFolders": "never",
  // html snippets fot twig
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "glassit.alpha": 255,
  "liveServer.settings.fullReload": true,
  "workbench.startupEditor": "none",
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "terminal.integrated.defaultProfile.osx": "fish",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "svelte.enable-ts-plugin": true,
  "workbench.list.smoothScrolling": true,
  "livePreview.autoRefreshPreview": "On Changes to Saved Files",
  "workbench.activityBar.location": "top",
  "editor.largeFileOptimizations": false,
  "terminal.integrated.fontSize": 14,
  "debug.disassemblyView.showSourceCode": false,
  "explorer.confirmDragAndDrop": false,
  "git.enableSmartCommit": true,
  "hediet.vscode-drawio.resizeImages": null,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[twig]": {
    "editor.defaultFormatter": "mblode.twig-language-2"
  },
  "chat.editor.fontSize": 14,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmPasteNative": false,
  "github.copilot.editor.enableAutoCompletions": true,
  "workbench.sideBar.location": "right",
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "editor.fontSize": 14,
  "material-icon-theme.files.color": "#90a4ae",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "tabnine.experimentalAutoImports": true,
  "editor.inlayHints.enabled": "on",
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#1073cf2d",
    "editor.lineHighlightBorder": "#9fced11f"
  },
  "diffEditor.wordWrap": "on",
  "editor.guides.indentation": true,
  "window.customTitleBarVisibility": "auto",
  "workbench.colorTheme": "Gruvbox Dark Hard"
}

Description

When using the Tailwind CSS IntelliSense extension in Visual Studio Code on Ubuntu LTS, the editor experiences significant slowdowns during autocomplete operations. This performance issue does not occur on macOS or Windows 11—even on the same machine—suggesting it may be specific to the Ubuntu environment.

UPDATE:
After further testing, I've discovered that the lag in autocomplete suggestions occurs only within a specific project.

package.json

{
  "devDependencies": {
    "concurrently": "^8.2.2",
    "live-server": "^1.2.2",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "^3.4.9"
  },
  "scripts": {
    "dev": "concurrently \"npm run watch\" \"npm run serve\"",
    "watch": "tailwindcss build -i src/input.css -o src/output.css --watch",
    "serve": "live-server --open=src/index.html --port=3000",
    "buildCSS": "tailwindcss build -i src/input.css -o src/output.css",
    "format": "prettier --write \"src/**/*.html\" \"src/**/*.css\"",
    "build": "concurrently \"npm run buildCSS\" \"npm run serve\""
  }
}

Metadata

Metadata

Assignees

Labels

questionFurther information is requested

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions