Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ellreka/tailwindcss-highlight

This extension highlights the utilities of TailwindCSS.
https://github.com/ellreka/tailwindcss-highlight

highlight tailwind tailwindcss vscode-extension

Last synced: 12 days ago
JSON representation

This extension highlights the utilities of TailwindCSS.

Host: GitHub
URL: https://github.com/ellreka/tailwindcss-highlight
Owner: ellreka
License: mit
Created: 2021-04-21T14:13:56.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-12-12T01:21:29.000Z (15 days ago)
Last Synced: 2024-12-12T02:26:49.902Z (15 days ago)
Topics: highlight, tailwind, tailwindcss, vscode-extension
Language: TypeScript
Homepage: https://marketplace.visualstudio.com/items?itemName=ellreka.tailwindcss-highlight
Size: 1.29 MB
Stars: 30
Watchers: 2
Forks: 7
Open Issues: 15
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

README

# Tailwind CSS Highlight

![](https://raw.githubusercontent.com/ellreka/tailwindcss-highlight/main/assets/visual-image.png)

This extension highlights the utilities of TailwindCSS.

## Installation

## Development

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

## Configuration

### `tailwindcss-highlight.languages`

List of languages to apply highlighting.

```json
"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](https://github.com/ellreka/tailwindcss-highlight/blob/main/src/defaultConfig.ts)

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

### `tailwindcss-highlight.customUtilitiesConfig`

Configuration for highlighting utilities.
Override [default config](https://github.com/ellreka/tailwindcss-highlight/blob/main/src/defaultConfig.ts).
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](https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions) |

#### Example: Make it a underline instead of a highlight

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

![](https://raw.githubusercontent.com/ellreka/tailwindcss-highlight/main/assets/example-configs.png)

### `tailwindcss-highlight.defaultVariantsColor`

Default color of the variants.

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

### `tailwindcss-highlight.customVariantsConfig`

Configuration for highlighting variants.

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

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

#### Example: Change the color of the focus variants

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