TailwindCSS Text Shadow Plugin
The TailwindCSS Text Shadow Plugin extends the default set of utility classes in TailwindCSS to provide easy text shadow customization for your web projects. With this plugin, you can apply custom text shadows using utility classes or define your own text shadow variations based on predefined steps and color palettes.
Installation
To use this plugin, you need to have TailwindCSS installed in your project. If you haven't installed TailwindCSS yet, follow these steps:
Using pnpm
pnpm add @designbycode/tailwindcss-text-shadow
Using npm
npm install @designbycode/tailwindcss-text-shadow
Using yarn
yarn add @designbycode/tailwindcss-text-shadow
Setup
- Add the Plugin to your TailwindCSS Config In your tailwind.config.js file, add the plugin to the plugins array:
module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-text-shadow"),
],
}
Default configuration styles
- If the default styles do not suit your preferences, you can effortlessly customize them using the following configuration options
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: "3px",
shadowOffsetX: "2px",
shadowOffsetY: "2px",
})
Use
Video Tutorial
See plugin in action in video below. 👇
https://youtu.be/Xb0wAMAGAHE?si=WgRK5rak05yBh-Yz
Apply Text Shadows
Once the plugin is added to your TailwindCSS configuration, you can use the provided utility classes to apply text shadows to your HTML elements.
<h1 class="text-4xl text-shadow ">Hello, TailwindCSS!</h1>
Text shadow blur modifier
To make the spread or blur bigger add the .text-shadow-blur-{value}
<h1 class="text-4xl text-shadow text-shadow-blur-2 ">Hello, TailwindCSS!</h1>
Text shadow x and y modifiers
The shadow can be moved on the xy axis using .text-shadow-x-{value}
and .text-shadow-y-{value}
<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red">Hello, TailwindCSS!</h1>
Text shadow color modifier
<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red-500">Hello, TailwindCSS!</h1>
In the example above, the <h1>
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.
Text shadow color opacity
To change the opacity of the text-shadow-color use the following method
<h1 class="text-shadow text-shadow-red-500/10">Hello, TailwindCSS!</h1>
<!-- with arbitrary values -->
<h1 class="text-shadow text-shadow-red-[rgb(0,0,0,0.5)]">Hello, TailwindCSS!</h1>
<!-- or arbitrary with / -->
<h1 class="text-shadow text-shadow-red-[gray]/20">Hello, TailwindCSS!</h1>
Warning New experimental long shadow feature
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
experimental: true, // 👈
})
Long text shadow
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]
<h1 class="text-shadow-sm text-shadow-blur-2 text-shadow-red">Hello, TailwindCSS!</h1>
<!-- or -->
<h1 class="text-shadow-[1000]">Hello, TailwindCSS!</h1>
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.
Example
// tailwind.config.js
module.exports = {
theme: {
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.
Contributing
Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.
Contributors
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- This plugin is inspired by the needs of web developers using TailwindCSS.
- Special thanks to the TailwindCSS team for creating such an amazing framework.