3 |
3 |
4 |
5 | ## Tailwind CSS Text Stroke Plugin
6 |
7 | [](https://badge.fury.io/js/@designbycode%2Ftailwindcss-text-stroke)
8 | 
9 | 
10 | 
11 | 
12 | [](https://github.com/DesignByCode/tailwindcss-text-stroke/stargazers)
13 |
14 | Add custom text stroke utilities to your Tailwind CSS project using this plugin. It allows you to apply an outline-like stroke around text using CSS properties supported by WebKit-based browsers.
15 |
16 | ## 📇 Table of Contents
17 |
18 | * [Installation](#installation)
19 | * [Using pnpm](#using-pnpm)
20 | * [Using npm](#using-npm)
21 | * [Using yarn](#using-yarn)
22 | * [Setup](#setup)
23 | * [Use](#use)
24 | * [Example](#example)
25 | * [With modifiers](#with-modifiers)
26 | * [Contributing](#contributing)
27 | * [License](#license)
28 | * [Author](#author)
29 | * [Acknowledgments](#acknowledgments)
30 |
31 | ## Installation
32 |
33 | To use this plugin, you need to install it via pnpm, npm or yarn.
34 |
35 | #### Using pnpm
36 |
37 | ```bash
38 | pnpm add @designbycode/tailwindcss-text-stroke
39 | ```
40 |
41 | #### Using npm
42 |
43 | ```bash
44 | npm install @designbycode/tailwindcss-text-stroke
45 | ```
46 |
47 | #### Using yarn
48 |
49 | ```bash
50 | yarn add @designbycode/tailwindcss-text-stroke
51 | ```
52 |
53 | First, ensure you have Tailwind CSS installed in your project. If not, install it by following the official documentation.
54 |
55 | Next, require the plugin in your Tailwind CSS configuration file (usually named tailwind.config.js).
56 |
57 | ## Setup
58 |
59 | 1. First, ensure you have Tailwind CSS installed in your project. If not, install it by following the official documentation.
60 |
61 | 2. Next, require the plugin in your Tailwind CSS configuration file (usually named tailwind.config.js).
62 |
63 | ```javascript
64 | module.exports = {
65 | // ...other configurations
66 | plugins: [
67 | // ...other plugins
68 | require("@designbycode/tailwindcss-text-stroke"),
69 | ],
70 | };
71 | ```
72 |
73 | Once you've required the plugin and added it to the plugins array, you can use the new text stroke utilities in your HTML templates.
74 |
75 | ## Use
76 |
77 | The Text Stroke plugin provides the following utility classes for styling text with stroke effects:
78 |
79 | * ```.text-stroke```: Base component that sets the default text stroke styles. You can override these styles using CSS variables.
80 | * ```.text-stroke-{value}```: Sets the stroke width to the specified {value}. The available options are defined in the textStrokeWidth theme configuration.
81 | * ```.text-stroke-{color}```: Applies a custom color to the text stroke. The {color} should match a color in your Tailwind CSS color palette.
82 | * ```.text-stroke-fill-{color}```: Applies a custom fill color to the text stroke. The {color} should match a color in your Tailwind CSS color palette.
83 |
84 | ### Example
85 |
86 | Here's an example of how you can use the utility classes to apply image masks:
87 |
88 | ```html
89 | 
114 |