Closed
Description
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\""
}
}