Tailwind CSS Highlight

This extension highlights the utilities of TailwindCSS.

Installation

https://marketplace.visualstudio.com/items?itemName=ellreka.tailwindcss-highlight

Development

1. yarn install
2. yarn dev
3. Run debug mode on the vscode.

Configuration

tailwindcss-highlight.languages

List of languages to apply highlighting.

"tailwindcss-highlight.languages": [
  "html",
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "vue",
  "php",
  "svelte"
]

tailwindcss-highlight.enabledUtilities

List of utilities to highlight.

Utility name list: src/defaultConfig.ts

"tailwindcss-highlight.enabledUtilities": [
  "padding",
  "margin",
  "space",
  "width",
  "height",
  "flex",
  "grid",
  "position"
]

tailwindcss-highlight.customUtilitiesConfig

Configuration for highlighting utilities. Override default config. Set only the properties you want to override.

| Name | Description | Type | | ----- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | regex | Regex to match the utility | String | | color | Color of the highlight. Style property takes precedence. | String | | style | Highlight styles | DecorationRenderOptions |

Example: Make it a underline instead of a highlight

"tailwindcss-highlight.customUtilitiesConfig": {
  "padding": {
    "style": {
      "backgroundColor": "",
      "borderWidth": "0 0 3px 0",
      "borderStyle": "solid",
      "borderColor": "rgba(187, 196, 136, 1)",
      "color": "currentColor"
    }
  },
}

tailwindcss-highlight.defaultVariantsColor

Default color of the variants.

"tailwindcss-highlight.defaultVariantsColor": "#1FAB89"

tailwindcss-highlight.customVariantsConfig

Configuration for highlighting variants.

| Name | Description | Type | | ----- | --------------- | ---------- | | Key | Color | String | | Value | List of variant | String[] |

"tailwindcss-highlight.customVariantsConfig": {
  "#08D9D6": [
    "sm",
    "md",
    "lg",
    "xl",
    "2xl"
  ]
}

Example: Change the color of the focus variants

"tailwindcss-highlight.customVariantsConfig": {
  "#FFB6C1": [
    "focus",
    "focus-within",
    "focus-visible"
  ]
}