Description
What version of Tailwind CSS IntelliSense are you using?
v0.9.5
What version of Tailwind CSS are you using?
3.2.4
What package manager are you using?
Yarn 3. This also happens with npm and pnpm.
What operating system are you using?
Windows
Tailwind config
module.exports = {
content: [
'./app/**/*.{jsx,tsx}',
'./pages/**/*.{jsx,tsx}',
'./components/**/*.{jsx,tsx}',
],
theme: {
extend: {},
},
darkMode: 'class',
plugins: [require('@tailwindcss/forms')],
};
VS Code settings
{
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[markdown]": {
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
},
"[mdx]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[postcss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[rust]": {
"editor.defaultFormatter": "rust-lang.rust-analyzer"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[xml]": {
"editor.defaultFormatter": "fabianlauer.vs-code-xml-format"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"ejs",
"jinja",
"javascriptreact",
"typescriptreact",
"plaintext",
"mdx",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml",
"HTML (EEx)",
"HTML (Eex)",
"plist"
],
"auto-close-tag.insertSpaceBeforeSelfClosingTag": true,
"better-comments.highlightPlainText": true,
"better-comments.tags": [
{
"backgroundColor": "transparent",
"bold": false,
"color": "#eb6f92",
"italic": false,
"strikethrough": false,
"tag": "!",
"underline": false
},
{
"backgroundColor": "transparent",
"bold": false,
"color": "#9ccfd8",
"italic": false,
"strikethrough": false,
"tag": "?",
"underline": false
},
{
"backgroundColor": "transparent",
"bold": false,
"color": "#6e6a86",
"italic": false,
"strikethrough": true,
"tag": "//",
"underline": false
},
{
"backgroundColor": "transparent",
"bold": false,
"color": "#c4a7e7",
"italic": false,
"strikethrough": false,
"tag": "*",
"underline": false
}
],
"cSpell.language": "en,en-GB",
"cSpell.userWords": [
"FOUC",
"hoverable",
"premade",
"pressable",
"searchbar",
"skillset",
"supabase",
"webm",
"webp"
],
"colorize.colorized_colors": [
"BROWSERS_COLORS",
"HEXA",
"RGB",
"ARGB",
"HSL"
],
"colorize.colorized_variables": [
"CSS",
"SASS"
],
"colorize.decoration_type": "underline",
"colorize.exclude": [
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/.git",
"**/node_modules",
"**/bower_components",
"**/tmp",
"**/dist",
"**/tests"
],
"colorize.include": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"**/*.styled.**",
"**/*.{js, jsx}",
"**/*.{ts, tsx}",
"**/*.{md, msx}"
],
"colorize.languages": [
"css",
"sass",
"scss",
"less",
"postcss",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"stylus",
"xml",
"svg",
"json"
],
"console-ninja.toolsToEnableSupportAutomaticallyFor": {
"live-preview": true,
"live-server": true
},
"debug.javascript.unmapMissingSources": true,
"doiuse.browsers": [
">5%",
"not IE 11"
],
"doiuse.enable": true,
"editor.bracketPairColorization.enabled": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
"editor.codeLensFontFamily": "\"Cascadia Mono\"",
"editor.fontFamily": "\"Fira Code\"",
"editor.fontLigatures": true,
"editor.formatOnPaste": true,
"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": false,
"editor.inlayHints.fontFamily": "\"Cascadia Mono\"",
"editor.inlineSuggest.enabled": true,
"editor.linkedEditing": true,
"editor.mouseWheelZoom": true,
"editor.semanticTokenColorCustomizations": {
"[Rosé Pine*]": {
"rules": {
"function.unsafe": "#eb6f92",
"method.unsafe": "#eb6f92",
"operator.unsafe": "#eb6f92"
}
},
"enabled": true,
"rules": {
/* Rust */
"*.mutable": {
"underline": false // underline is the default
}
}
},
"editor.smoothScrolling": true,
"editor.suggestSelection": "first",
"editor.tabCompletion": "on",
"editor.tabSize": 2,
"editor.tokenColorCustomizations": {
"[Rosé Pine*]": {
"textMateRules": [
{
"scope": [
"entity.other.attribute-name",
"entity.other.inherited-class",
"support.function",
"variable",
"meta.directive.vue"
],
"settings": {
"fontStyle": ""
}
},
{
"scope": [
"storage.modifier.mut.rust"
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
"constant.other.color.rgb-value.hex.css",
"constant.numeric.css"
],
"settings": {
"foreground": "#f6c177"
}
},
{
"scope": [
"storage.type.tsx",
"meta.var.expr.tsx",
"meta.block.tsx",
"meta.function.expression.tsx",
"meta.export.default.tsx",
"source.tsx"
],
"settings": {
"foreground": "#2288b1"
}
},
{
"scope": [
"keyword.control.flow.tsx",
"meta.block.tsx",
"meta.function.expression.tsx",
"meta.export.default.tsx",
"source.tsx"
],
"settings": {
"foreground": "#9ccfd8"
}
}
]
}
},
"editor.wordWrap": "on",
"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
"markdown": "javascriptreact",
"markdown-react": "javascriptreact"
},
"emmet.syntaxProfiles": {
"html": {
"attr_quotes": "single"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
},
"jsx": {
"attr_quotes": "single",
"self_closing_tag": true
},
"xml": {
"attr_quotes": "single"
}
},
"emmet.triggerExpansionOnTab": true,
"errorLens.errorGutterIconColor": "#FF9580",
"errorLens.infoGutterIconColor": "#8AFF80",
"errorLens.statusBarColorsEnabled": true,
"errorLens.warningGutterIconColor": "#FFFF80",
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"files.associations": {
"*.jsx": "javascriptreact",
"*.mdx": "mdx",
"*.scss": "scss",
"*.tsx": "typescriptreact"
},
"files.autoSave": "afterDelay",
"git.autofetch": true,
"git.enableSmartCommit": true,
"githubPullRequests.createOnPublishBranch": "never",
"i18n-ally.dirStructure": "auto",
"i18n-ally.displayLanguage": "en",
"i18n-ally.editor.preferEditor": true,
"i18n-ally.extract.autoDetect": true,
"i18n-ally.fullReloadOnChanged": true,
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.translate.fallbackToKey": true,
"javascript.suggest.paths": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"liveSassCompile.settings.autoprefix": [
"> 5%",
"last 2 versions"
],
"liveSassCompile.settings.formats": [
{
"extensionName": ".css",
"format": "compressed"
}
],
"liveServer.settings.donotShowInfoMsg": true,
"markdown.occurrencesHighlight.enabled": true,
"markdown.preview.fontFamily": "\"Cascadia Mono\"",
"markdownlint.lintWorkspaceGlobs": [
"**/*.{md,mdx,mkd,mdwn,mdown,markdown,markdn,mdtxt,mdtext,workbook}",
"!**/bower_components",
"!**/node_modules",
"!**/vendor",
"!**/.git"
],
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.saturation": 1,
"path-intellisense.autoTriggerNextSuggestion": true,
"postcssSorting.config": {
"order": [
"custom-properties",
"dollar-variables",
"declarations",
"rules",
"at-rules"
],
"properties-order": [
"display",
"position",
"top",
"right",
"bottom",
"left"
]
},
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"quokka.compactMessageOutput": true,
"quokka.showValueOnMultilineSelection": true,
"reactSnippets.settings.importReactOnTop": false,
"reactSnippets.settings.prettierEnabled": true,
"redhat.telemetry.enabled": true,
"security.workspace.trust.untrustedFiles": "open",
"sortJSON.contextMenu": {
"sortJSONAlphaNumReverse": false,
"sortJSONKeyLengthReverse": false,
"sortJSONReverse": false,
"sortJSONTypeReverse": false,
"sortJSONValuesReverse": false
},
"stylelint.packageManager": "yarn",
"stylelint.snippet": [
"css",
"less",
"postcss",
"scss",
"styled"
],
"stylelint.validate": [
"css",
"less",
"postcss",
"scss",
"styled"
],
"tailwindCSS.emmetCompletions": true,
"terminal.integrated.copyOnSelection": true,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.enableBell": true,
"terminal.integrated.profiles.windows": {
"Command Prompt": {
"args": [],
"icon": "terminal-cmd",
"path": [
"${env:windir}\\Sysnative\\cmd.exe",
"${env:windir}\\System32\\cmd.exe"
]
},
"Git Bash": {
"source": "Git Bash"
},
"PowerShell": {
"icon": "terminal-powershell",
"source": "PowerShell"
},
"Windows PowerShell": {
"path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}
},
"todohighlight.defaultStyle": {
"backgroundColor": "transparent",
"border": "1px dashed #c4a7e7",
"color": "#c4a7e7",
"isWholeLine": false,
"overviewRulerColor": "#c4a7e7"
},
"todohighlight.keywords": [
"DEBUG:",
"REVIEW:",
"NOTE:",
{
"backgroundColor": "transparent",
"border": "1px dashed #9ccfd8",
"color": "#9ccfd8",
"isWholeLine": false,
"overviewRulerColor": "#9ccfd8",
"text": "RESTYLE:"
},
{
"backgroundColor": "transparent",
"border": "1px dashed #eb6f92",
"color": "#eb6f92",
"isWholeLine": false,
"overviewRulerColor": "#eb6f92",
"text": "FIXME:"
},
{
"backgroundColor": "transparent",
"border": "1px dashed #f6c177",
"color": "#f6c177",
"isWholeLine": false,
"overviewRulerColor": "#f6c177",
"text": "TODO:"
}
],
"typescript.implementationsCodeLens.enabled": true,
"typescript.referencesCodeLens.enabled": true,
"typescript.suggest.paths": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"window.autoDetectColorScheme": true,
"workbench.colorCustomizations": {
"[Dracula Pro]": {
"activityBar.background": "#151320",
"activityBar.border": "#151320",
"breadcrumb.background": "#151320",
"editor.background": "#151320",
"editorGroupHeader.tabsBackground": "#151320",
"panel.background": "#151320",
"sideBar.border": "#9580ff0a",
"sideBarSectionHeader.background": "#151320",
"sideBarSectionHeader.border": "#27262921",
"statusBar.background": "#151320",
"tab.activeBackground": "#151320",
"tab.activeBorderTop": "#ff7ebf",
"tab.activeModifiedBorder": "#ff7ebf",
"tab.border": "#ff7ebf13",
"tab.inactiveBackground": "#151320",
"terminal.background": "#151320",
"titleBar.inactiveBackground": "#151320"
},
"[Rosé Pine*]": {
"editorInlayHint.background": "#19172448",
/* Rust */
"editorInlayHint.foreground": "#6e6a86f0",
"editorInlayHint.parameterBackground": "#19172448",
"editorInlayHint.parameterForeground": "#9ccfd8f0",
"editorInlayHint.typeBackground": "#19172448",
// Overrides for specific kinds of inlay hints
"editorInlayHint.typeForeground": "#c4a7e7f0"
},
"[Tokyo Night]": {
"activityBar.foreground": "#bdc7f0",
"activityBar.inactiveForeground": "#787c99",
"breadcrumb.activeSelectionForeground": "#bdc7f0",
"breadcrumb.focusForeground": "#bdc7f0",
"breadcrumb.foreground": "#959cbd",
"dropdown.foreground": "#959cbd",
/* Rust */
// "editorInlayHint.foreground": "#868686f0",
"editorInlayHint.background": "#00000000",
"editorInlayHint.parameterForeground": "#fdb6fdf0",
// Overrides for specific kinds of inlay hints
"editorInlayHint.typeForeground": "#696d87f0",
"foreground": "#959cbd",
"gitDecoration.ignoredResourceForeground": "#696d87",
"input.foreground": "#959cbd",
"input.placeholderForeground": "#959cbd",
"list.activeSelectionForeground": "#bdc7f0",
"list.focusForeground": "#bdc7f0",
"list.hoverForeground": "#bdc7f0",
"list.inactiveSelectionBackground": "#202330",
"list.inactiveSelectionForeground": "#bdc7f0",
"menu.foreground": "#bdc7f0",
"menubar.selectionForeground": "#bdc7f0",
"panelTitle.activeBorder": "#3d59a1",
"panelTitle.activeForeground": "#bdc7f0",
"panelTitle.inactiveForeground": "#959cbd",
"sideBar.foreground": "#959cbd",
"statusBar.foreground": "#bdc7f0",
"tab.activeForeground": "#bdc7f0",
"tab.inactiveForeground": "#959cbd"
}
},
"workbench.colorTheme": "Rosé Pine",
"workbench.editor.untitled.hint": "hidden",
"workbench.editorAssociations": {
"*.zip": "default"
},
"workbench.iconTheme": "material-icon-theme",
"workbench.layoutControl.enabled": true,
"workbench.list.smoothScrolling": true,
"workbench.preferredHighContrastLightColorTheme": "Tokyo Night",
"workbench.productIconTheme": "icons-carbon",
"workbench.startupEditor": "none",
"yaml.format.singleQuote": true,
"editor.quickSuggestions": {
"strings": "inline"
},
"prettier.endOfLine": "auto"
}
Reproduction URL
https://github.com/apriltaoyvr/tailwind-intellisense-reproduction
Describe your issue
TailwindCSS Intellisense does not work if a project is within a folder with square brackets. It will detect the config file (and Tailwind will work fine) but the extension will never initialize. No intellisense completion, highlighted colours, hover for info, etc.
I could not figure out why this was happening for some projects but not others until I saw https://stackoverflow.com/a/70999335 so it is not an isolated issue.
To reproduce:
- Create an outer folder with square brackets e.g. [example]
- Create a project in the folder
- Download and initialize Tailwind
- Try using classes and checking for intellisense