https://github.com/hacknug/tailwindcss-text-fill-stroke
Text-fill and text-stroke utilities for Tailwind CSS.
https://github.com/hacknug/tailwindcss-text-fill-stroke
Last synced: 7 months ago
JSON representation
Text-fill and text-stroke utilities for Tailwind CSS.
- Host: GitHub
- URL: https://github.com/hacknug/tailwindcss-text-fill-stroke
- Owner: hacknug
- Created: 2018-08-24T16:08:34.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-27T09:49:44.000Z (7 months ago)
- Last Synced: 2025-03-28T13:07:35.289Z (7 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-text-fill-stroke
- Size: 257 KB
- Stars: 78
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Tailwind CSS Text Indent Plugin
This plugin adds utilities to use `text-fill`, `text-stroke` and `paint-order` with Tailwind CSS.
> [!NOTE]
> Now with support for TailwindCSS v3 and arbitrary values and variants :sparkles:
## Installation
Add this plugin to your project:
```bash
# Install using pnpm
pnpm install --save-dev tailwindcss-text-fill-stroke
# Install using npm
npm install --save-dev tailwindcss-text-fill-stroke
# Install using yarn
yarn add -D tailwindcss-text-fill-stroke
```
## Usage
By default the plugin uses the `borderColor` and `borderWidth` properties from your theme to generate all of its classes. You can change that to whatever, just keep in mind if you have a `default` key in both objects, `.text-stroke` will set both the `-webkit-stroke-color` and `-webkit-stroke-width` of the element.
```js
// tailwind.config.js
{
theme: { // defaults to these values
textFillColor: theme => theme('borderColor'),
textStrokeColor: theme => theme('borderColor'),
textStrokeWidth: theme => theme('borderWidth'),
paintOrder: {
'fsm': { paintOrder: 'fill stroke markers' },
'fms': { paintOrder: 'fill markers stroke' },
'sfm': { paintOrder: 'stroke fill markers' },
'smf': { paintOrder: 'stroke markers fill' },
'mfs': { paintOrder: 'markers fill stroke' },
'msf': { paintOrder: 'markers stroke fill' },
},
},
plugins: [
require('tailwindcss-text-fill-stroke'), // no options to configure
],
}
```
```css
.text-fill { -webkit-text-fill-color: #e0e0e0 }
.text-fill-transparent { -webkit-text-fill-color: transparent }
.text-fill-black { -webkit-text-fill-color: #000 }
.text-fill-white { -webkit-text-fill-color: #fff }
.text-stroke { -webkit-text-stroke-color: #e0e0e0 }
.text-stroke-transparent { -webkit-text-stroke-color: transparent }
.text-stroke-black { -webkit-text-stroke-color: #000 }
.text-stroke-white { -webkit-text-stroke-color: #fff }
.text-stroke { -webkit-text-stroke-width: 1px }
.text-stroke-0 { -webkit-text-stroke-width: 0 }
.text-stroke-2 { -webkit-text-stroke-width: 2px }
.text-stroke-4 { -webkit-text-stroke-width: 4px }
.text-stroke-8 { -webkit-text-stroke-width: 8px }
.paint-fsm { paint-order: fill stroke markers }
.paint-fms { paint-order: fill markers stroke }
.paint-sfm { paint-order: stroke fill markers }
.paint-smf { paint-order: stroke markers fill }
.paint-mfs { paint-order: markers fill stroke }
.paint-msf { paint-order: markers stroke fill }
@media (min-width: 640px) {
.sm\:text-fill { -webkit-text-fill-color: #e0e0e0 }
.sm\:text-fill-transparent { -webkit-text-fill-color: transparent }
.sm\:text-fill-black { -webkit-text-fill-color: #000 }
.sm\:text-fill-white { -webkit-text-fill-color: #fff }
.sm\:text-stroke { -webkit-text-stroke-color: #e0e0e0 }
.sm\:text-stroke-transparent { -webkit-text-stroke-color: transparent }
.sm\:text-stroke-black { -webkit-text-stroke-color: #000 }
.sm\:text-stroke-white { -webkit-text-stroke-color: #fff }
.sm\:text-stroke { -webkit-text-stroke-width: 1px }
.sm\:text-stroke-0 { -webkit-text-stroke-width: 0 }
.sm\:text-stroke-2 { -webkit-text-stroke-width: 2px }
.sm\:text-stroke-4 { -webkit-text-stroke-width: 4px }
.sm\:text-stroke-8 { -webkit-text-stroke-width: 8px }
.sm\:paint-fsm { paint-order: fill stroke markers }
.sm\:paint-fms { paint-order: fill markers stroke }
.sm\:paint-sfm { paint-order: stroke fill markers }
.sm\:paint-smf { paint-order: stroke markers fill }
.sm\:paint-mfs { paint-order: markers fill stroke }
.sm\:paint-msf { paint-order: markers stroke fill }
}
```