This is a pre v2 fork of the Tailwind CSS Highlight extension.

Original readme below. (images probably broken)

Tailwind CSS Highlight

This extension highlights the utilities of TailwindCSS.

You can customize colors and regexes.

Installation

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

Development

Please 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.configs

Configuration for highlighting utilities.

"tailwindcss-highlight.configs": {
  "padding": {
    "enable": true,
    "regex": "(?<=[:`'\"\\s])(|-)p(|t|b|r|l|x|y)-[^`'\"\\s]+",
    "options": {
      "color": "black",
      "backgroundColor": "rgba(187, 196, 136, 1)"
    }
  }
}

Customization example

Make it a underline instead of a highlight

"tailwindcss-highlight.configs": {
  "padding": {
    "enable": true,
    "regex": "(?<=[:`'\"\\s])(|-)p(|t|b|r|l|x|y)-[^`'\"\\s]+",
    "options": {
      "backgroundColor": "",
      "borderWidth": "0 0 3px 0",
      "borderStyle": "solid",
      "borderColor": "rgba(187, 196, 136, 1)",
      "color": "currentColor"
    }
  },
}

tailwindcss-highlight.variants

Configuration for highlighting variants.

"tailwindcss-highlight.configs": {
  "responsive": {
    "enable": true,
    "variants": [
      "sm",
      "md",
      "lg",
      "xl",
      "2xl"
    ],
    "color": "#51FFFF"
  },
}

Customization example

Change the color of the focus variants

"tailwindcss-highlight.configs": {
  "focus": {
    "enable": true,
    "variants": [
      "focus",
      "focus-within",
      "focus-visible"
    ],
    "color": "#FFB6C1"
  },
}