Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
giorgitchanturidze opened this issue Sep 18, 2024 · 0 comments

Comments

@giorgitchanturidze
Copy link

giorgitchanturidze commented Sep 18, 2024

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\""
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant