hyoban / tailwindcss-classname-highlight

Highlight valid Tailwind CSS class names in your code.

Latest Posts on xLog

• May 18 - 为什么是 ESLint
• Mar 19 - xLog SDK 的一些进展
• Feb 15 - 我如何开始写一个 TypeScript 库
• Jan 04 - 实现一个满意的深色模式切换按钮
• Sep 30 - 写在 24 岁之前

Thanks to the following people for supporting my open-source work! 💖

tailwindcss-classname-highlight's Issues

Not work for tailwind 3.2.4

Describe the bug

Detected Tailwind CSS version: 3.2.4
Tailwind CSS config file found at /Users/hyoban/f/socialify/tailwind.config.js
Updating Tailwind CSS context
Error updating Tailwind CSS context: Cannot find module '/Users/hyoban/f/socialify/node_modules/tailwindcss/lib/lib/load-config.js'
Require stack:
- /Users/hyoban/.vscode/extensions/hyoban.tailwindcss-classname-highlight-0.4.0/dist/index.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
- 
Check context failed: Tailwind CSS context not found

Reproduction

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.26 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/85003_1710297271039/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/85003_1710297271039/bin/yarn
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/85003_1710297271039/bin/npm
    pnpm: 8.4.0 - ~/Library/Caches/fnm_multishells/85003_1710297271039/bin/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.3.1

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update all non-major dependencies (eslint-config-hyoban, release-it-pnpm, tailwindcss)

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4

.github/workflows/format.yml

• actions/checkout v4
• actions/setup-node v4
• stefanzweifel/git-auto-commit-action v5

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @types/micromatch ^4.0.6
• @vscode/vsce ^2.24.0
• eslint ^8.57.0
• eslint-config-hyoban ^0.2.13
• fast-glob ^3.3.2
• ignore ^5.3.1
• jiti ^1.21.0
• local-pkg ^0.5.0
• micromatch ^4.0.5
• release-it ^17.1.1
• release-it-pnpm 4.1.6
• sucrase ^3.35.0
• tsup ^8.0.2
• typescript ^5.4.3
• vitest ^1.4.0
• pnpm 8.15.5

playground/package.json

• next ^14.1.4
• react ^18.2.0
• react-dom ^18.2.0
• autoprefixer ^10.4.19
• postcss ^8.4.38
• tailwindcss ^3.4.1

---

• Check this box to trigger a request for Renovate to run again on this repository

使用 daisyUI 时 HTML 同名元素也被高亮

https://daisyui.com/components/input/

Wrong decorate

Like this, this string or object field is not the css atom.

New config `tailwindcss-classname-highlight.root`

Clear and concise description of the problem

Currently, this extension does not support multi tailwind projects in one workspace

Suggested solution

Provide a tailwindcss-classname-highlight.root configuration, which can take a string array. Use different config for different project

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Allow configuration of which attributes to check for valid Tailwind classes

Clear and concise description of the problem

I don't need to see that contents in aria-label="Table of contents" is a valid TailwindCSS class.

Suggested solution

Ideally this would only check for class names inside of class or className attributes. Alternatively, there could be a configuration option to set which attributes to check.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

not work in .jsx files

unexpected underline outside jsx

Describe the bug

description

unexpected underline outside jsx

reproduction steps

• enable the extension
• pnpm create vite -> react-ts template
• pnpm add tailwindcss postcss autoprefixer -D
• npx tailwindcss init -p

• // tailwind.config.js
  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      './index.html',
      './src/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

• const [isLoading] = useState(false)
  
  useEffect(() => {
    document.documentElement.style.overflow = isLoading ? 'hidden' : 'auto'
  
    return () => {
      document.documentElement.style.overflow = 'auto'
    }
  }, [isLoading])

After disabling the extension, the underline will disapper.

Reproduction

see above

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 123.30 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/Library/Caches/fnm_multishells/58748_1715304072290/bin/node
    npm: 10.5.2 - ~/Library/Caches/fnm_multishells/58748_1715304072290/bin/npm
    pnpm: 9.1.0 - ~/Library/Caches/fnm_multishells/58748_1715304072290/bin/pnpm
    bun: 1.1.7 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.5

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

It doesn't work when the className string has line breaks.

description

It doesn't work when the className string has line breaks in strings and string templates.

Please support custom regexp pattern to match className

Generally in business, there are many variables for className, and these are not enough to cover them all.

It might be better if you can use the className atom matching rules of the tailwindcss server.

If not, it is recommended to open up custom regular matching.

Thank you.

Ref: https://github.com/hyoban/tailwindcss-classname-highlight/blob/main/src/utils.ts#L6

Add helper comments for extended-colors when previewing.

Clear and concise description of the problem

description

I extend a color in the tailwind.config.js and use it in my project. When previewing, it displays the color in RGB, the tailwindcss generated results. When developing, I want to check the color to match the figma which produces the HEX instead of RGB.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        "my-color": "#0070E0"
      }
    },
  },
  plugins: [],
}

Suggested solution

suggestion

Could it add some helper comments like above?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.