Skip to content

Auto preview not show on hover custome style declaration in vuejs #838

Closed
@akhademik

Description

@akhademik

What version of VS Code are you using?
Version: 1.81.1
For example: v1.78.2

What version of Tailwind CSS IntelliSense are you using?
v0.9.11
For example: v0.7.0

What version of Tailwind CSS are you using?
v3.3.3
For example: v2.0.4

What package manager are you using?
pnpm
For example: npm, yarn

What operating system are you using?
macOS and vuejs
For example: macOS, Windows

Tailwind config

/* eslint-env node */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {},
    fontFamily: {
      nice: ['Rowdies', 'cursive'],
      roboto: ['Roboto', 'sans-serif']
    }
  },
  plugins: []
}

VS Code settings

{
"tailwindCSS.classAttributes": ["class", "className", "ngClass", "STYLE", "css\\w+"],
	"tailwindCSS.experimental.classRegex": [
		"css[-A-Za-z0-9]*\\s*=\\s*['\"`]([-A-Za-z0-9\\s]*)['\"`]",
		":\\s*?[\"'`]([^\"'`]*).*?(?=,|\\s*\\}|$)"
	],
	"tailwindCSS.experimental.configFile": null,
}

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Describe your issue

When add some regex to tailwindCSS.experimental.classRegex i'm able to use a custom declaration for style class like these

const const cssBorder = 'border border-solid'

const css = {
  base: 'text-slate-50',
  pre: 'text-opacity-30'
}

however when i tried to hover it to see it's preview like what name does what it not showing. I don't know what im i missing, because i kind of remember it shows when i'm using React.

Screenshot 2023-08-11 at 10 19 09
Screenshot 2023-08-11 at 10 20 14

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions