Tailwindcss utilities for text stroke
npm install @designbycode/tailwindcss-text-shadowbash
pnpm add @designbycode/tailwindcss-text-shadow
`
#### Using npm
`bash
npm install @designbycode/tailwindcss-text-shadow
`
#### Using yarn
`bash
yarn add @designbycode/tailwindcss-text-shadow
`
$3
1. Add the Plugin to your Tailwind CSS Config
In your tailwind.config.js file, add the plugin to the plugins array:
`javascript
module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-text-shadow"),
],
}
`
$3
2. If the default styles do not suit your preferences, you can effortlessly customize them using the following configuration options
`javascript
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: "3px",
shadowOffsetX: "2px",
shadowOffsetY: "2px",
})
`
Use
$3
See plugin in action in video below. 👇

$3
Once the plugin is added to your Tailwind CSS configuration, you can use the provided utility classes to apply text shadows to your HTML elements.
`html
Hello, Tailwind CSS!
`
$3
To make the spread or blur bigger add the .text-shadow-blur-{value}
`html
Hello, Tailwind CSS!
`
$3
The shadow can be moved on the xy axis using .text-shadow-x-{value} and .text-shadow-y-{value}
`html
Hello, Tailwind CSS!
`
$3
`html
Hello, Tailwind CSS!
`
In the example above, the element will have a red text shadow with an x offset of 3px, a y offset of 4px, and a blur radius of 2px. The text-shadow class enables the text shadow styles, while the text-shadow-x-md,
text-shadow-y-lg, and
text-shadow-blur-2 classes customize the horizontal offset, vertical offset, and blur radius, respectively.
$3
To change the opacity of the text-shadow-color use the following method
`html
Hello, Tailwind CSS!
Hello, Tailwind CSS!
Hello, Tailwind CSS!
`
> Warning
> New experimental long shadow feature
`javascript
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
experimental: true, // 👈
})
`
> Note the latest version doesn't need experimental anymore
$3
The long shadow is a new experimental feature that I add. It creates shadow that stacks to any amount. The classes is .text-shadow-sm or .text-shadow-[steps]
`html
Hello, Tailwind CSS!
Hello, Tailwind CSS!
`

Customization
You can customize the available text shadow options by modifying the theme.textShadowSteps property in your tailwind.config.js file. The steps defined in this object will be used to generate utility classes for each aspect of the text
shadow.
$3
`javascript
// tailwind.config.js
module.exports = {
theme: {
prefix: 'text-shadow',
textShadowSteps: {
sm: "1px",
md: "2px",
lg: "3px",
xl: "4px",
0: "0",
1: "1px",
2: "2px",
3: "3px",
4: "4px",
},
},
}
`
In this example, we have customized the textShadowSteps object with only four steps for sm, md, lg, and xl, and removed the rest. The plugin will generate utility classes accordingly.
$3
If you don't like to use class name .text-shadow or are getting conflicts in application you can change it to whatever you want like .textShadow, ts or whatever you want. Change it in theme settings.
`typescript
// tailwind.config.js
module.exports = {
theme: {
prefix: 'ts',
},
}
`
$3
`html
``