Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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-09-16T17:25:30.000Z (about 2 months ago)
- Last Synced: 2024-09-16T21:30:54.320Z (about 2 months ago)
- Topics: highlight, tailwind, tailwindcss, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=ellreka.tailwindcss-highlight
- Size: 1.23 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
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"
}
},
}
```
### `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"
]
}
```