https://github.com/jln13x/tailwindcss-highlights
A plugin for tailwindcss to add highlights to your text
https://github.com/jln13x/tailwindcss-highlights
highlights marks plugin tailwind tailwindcss tailwindcss-plugin
Last synced: 14 days ago
JSON representation
A plugin for tailwindcss to add highlights to your text
- Host: GitHub
- URL: https://github.com/jln13x/tailwindcss-highlights
- Owner: jln13x
- License: mit
- Created: 2022-09-26T17:13:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-09T08:44:04.000Z (6 months ago)
- Last Synced: 2025-03-10T17:18:09.459Z (about 1 month ago)
- Topics: highlights, marks, plugin, tailwind, tailwindcss, tailwindcss-plugin
- Language: Astro
- Homepage: https://tailwindcss-highlights.hubatsch.dev/
- Size: 1.11 MB
- Stars: 172
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - tailwindcss-highlights
README
# tailwindcss-highlights - A plugin for tailwindcss
See it in Action 👉 [Preview](https://tailwindcss-highlights.hubatsch.dev/) or [Playground](https://play.tailwindcss.com/hM0gHS3erl)
This plugin adds utility classes to easily add highlights to your texts.
## Installation
To install the package, run
npm install -D tailwindcss-highlights
Add the plugin to the `tailwind.config.js` file in:
```javascript
module.exports = {
plugins: [
require('tailwindcss-highlights')),
]
}
```## Usage
Use `highlight` to add the default highlight (variant 1) to your element.
```html
Lorem Ipsum
```
\
To change the color of the highlight use `highlight-{color}`. All the colors from your theme (default ones and customs) are available aswell as [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values).```html
Lorem Ipsum
```
\
You can choose from different kinds of variants with `highlight-variant-{value}`. Check out the available variants on the [Preview](https://tailwindcss-highlights.hubatsch.dev/) or use your own variant e.g. `highlight-variant-[url(./path/to/custom-variant.svg)]`.```html
Lorem Ipsum
```
Credits for some of the variants: [svgbox](https://svgbox.net/)\
Use the `highlight-spread-`-Utility to make the highlight spread into some direction.- `highlight-spread-{size}` - Spread in all directions
- `highlight-spread-{y,x}-{size}` - Spread on the x or y axis
- `highlight-spread-{t,b,l,r}-{size}` - Set the spread for each direction individually| Size | Value |
| ------ | ------- |
| `0` | `0` |
| `none` | `0` |
| `sm` | `-4px` |
| `md` | `-8px` |
| `lg` | `-12px` |
| `xl` | `-16px` |[Arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) are also supported.
```html
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
```## Other Examples
This plugin adds the highlight as `::after`-pseudo element so its possible to add additional styling by using the `after:`-utility.
\
**Change the position**
```html
Lorem Ipsum
```
**Adding a gradient to the highlight**
```html
Lorem Ipsum
```
\
**Rotate the highlight**
```html
Lorem Ipsum
```Note: The owner of this repository is not with associated with the company Tailwind Labs Inc. This is just a plugin for [tailwindcss](https://tailwindcss.com/)