tailwindcss-pseudo-elements
Advanced tools
Comparing version
{ | ||
"name": "tailwindcss-pseudo-elements", | ||
"version": "1.5.0", | ||
"version": "1.5.1", | ||
"description": "TailwindCSS Plugin that adds variants of pseudo elements.", | ||
@@ -35,8 +35,8 @@ "main": "index.js", | ||
"chai": "^4.2.0", | ||
"eslint": "^7.13.0", | ||
"eslint": "^7.15.0", | ||
"mocha": "^8.2.1", | ||
"postcss": "^8.1.14", | ||
"prettier": "^2.1.2", | ||
"prettier": "^2.2.1", | ||
"puppeteer": "^5.5.0", | ||
"tailwindcss": "^1.9.6" | ||
"tailwindcss": "^2.0.1" | ||
}, | ||
@@ -43,0 +43,0 @@ "peerDependencies": { |
@@ -28,15 +28,17 @@ # tailwindcss-pseudo-elements | ||
variants: { | ||
textColor: [ | ||
'responsive', | ||
'hover', | ||
'focus', | ||
'before', | ||
'after', | ||
// If you want to combine it with a pseudo class, | ||
// use `<pseudo-class>_<pseudo-element>`. | ||
'hover_before', | ||
'hover_after', | ||
'focus_before', | ||
'foo_bar', | ||
], | ||
extend: { | ||
textColor: [ | ||
'responsive', | ||
'hover', | ||
'focus', | ||
'before', | ||
'after', | ||
// If you want to combine it with a pseudo class, | ||
// use `<pseudo-class>_<pseudo-element>`. | ||
'hover_before', | ||
'hover_after', | ||
'focus_before', | ||
'foo_bar', | ||
], | ||
}, | ||
}, | ||
@@ -86,1 +88,18 @@ | ||
``` | ||
#### Content Property Utilities | ||
There are utilities that set the attributes of HTML elements to the content property. | ||
Mark it up as follows: | ||
```html | ||
<p | ||
class="text-lg text-blue-600 content-before content-after content-hover-before" | ||
tw-content-before="🧡" | ||
tw-content-hover-before="💖" | ||
tw-content-after="💙️" | ||
> | ||
Tailwind CSS | ||
</p> | ||
``` |
12939
3.19%104
22.35%