feat: long shadow

Author: claudemyburgh

.npmignore

@@ -24,3 +24,4 @@ esbuild.config.js
 *.svg
 README.md
 CHANGELOG.md
+img

README.md

@@ -1,9 +1,11 @@
 <a href="#installation" width="100%">
-<img src="banner.svg" alt="Title banner"/>
+<img src="img/banner.svg" alt="Title banner"/>
 </a>
 
 ## Tailwind CSS Text Shadow Plugin
 
+[![NPM](https://nodei.co/npm/@designbycode/tailwindcss-text-shadow.png?mini=true)](https://nodei.co/npm/@designbycode/tailwindcss-text-shadow/)
+
 [![npm version](https://badge.fury.io/js/@designbycode%2Ftailwindcss-text-shadow.svg)](https://badge.fury.io/js/@designbycode%2Ftailwindcss-text-shadow)
 ![npm](https://img.shields.io/npm/dt/%40designbycode/tailwindcss-text-shadow)
 ![NPM](https://img.shields.io/npm/l/%40designbycode%2Ftailwindcss-text-shadow)
@@ -13,35 +15,33 @@
 [![GitHub stars](https://img.shields.io/github/stars/DesignByCode/tailwindcss-text-shadow?style=social)](https://github.com/DesignByCode/tailwindcss-text-shadow/stargazers)
 [![HitCount](https://hits.dwyl.com/designbycode/tailwindcss-text-shadow.svg?style=flat)](http://hits.dwyl.com/designbycode/tailwindcss-text-shadow)
 
-[![NPM](https://nodei.co/npm/@designbycode/tailwindcss-text-shadow.png)](https://nodei.co/npm/@designbycode/tailwindcss-text-shadow/)
-
 The Tailwind CSS **Text Shadow Plugin** extends the default set of utility classes in **Tailwind CSS** 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.
 
-![TextShadow Plugin](screenshot.png)
+![TextShadow Plugin](img/screenshot.png)
 
 ## 📇 Table of Contents
 
-* [Installation](#installation)
-    * [Using pnpm](#using-pnpm)
-    * [Using npm](#using-npm)
-    * [Using yarn](#using-yarn)
-    * [Setup](#setup)
-    * [Default configuration styles](#default-configuration-styles)
-* [Use](#use)
-    * [Video Tutorial](#video-tutorial)
-    * [Apply Text Shadows](#apply-text-shadows)
-    * [Text shadow blur modifier](#text-shadow-blur-modifier)
-    * [Text shadow x and y modifiers](#text-shadow-x-and-y-modifiers)
-    * [Text shadow color modifier](#text-shadow-color-modifier)
-    * [Text shadow color opacity](#text-shadow-color-opacity)
-    * [Long shadow](#long-text-shadow)
-* [Customization](#customization)
-    * [Example](#example)
-* [Contributing](#contributing)
-* [License](#license)
-* [Author](#author)
-* [Acknowledgments](#acknowledgments)
+- [Installation](#installation)
+    - [Using pnpm](#using-pnpm)
+    - [Using npm](#using-npm)
+    - [Using yarn](#using-yarn)
+    - [Setup](#setup)
+    - [Default configuration styles](#default-configuration-styles)
+- [Use](#use)
+    - [Video Tutorial](#video-tutorial)
+    - [Apply Text Shadows](#apply-text-shadows)
+    - [Text shadow blur modifier](#text-shadow-blur-modifier)
+    - [Text shadow x and y modifiers](#text-shadow-x-and-y-modifiers)
+    - [Text shadow color modifier](#text-shadow-color-modifier)
+    - [Text shadow color opacity](#text-shadow-color-opacity)
+    - [Long shadow](#long-text-shadow)
+- [Customization](#customization)
+    - [Example](#example)
+- [Contributing](#contributing)
+- [License](#license)
+- [Author](#author)
+- [Acknowledgments](#acknowledgments)
 
 ## Installation
 
@@ -77,7 +77,7 @@ module.exports = {
         // ...other plugins
         require("@designbycode/tailwindcss-text-shadow"),
     ],
-};
+}
 ```
 
 ### Default configuration styles
@@ -103,47 +103,39 @@ module.exports = {
 
 See plugin in action in video below. 👇
 
-[![Tailwindcss text-shadow tutorial](thumb-play.png)](https://youtu.be/Xb0wAMAGAHE)
+[![Tailwindcss text-shadow tutorial](img/thumb-play.png)](https://youtu.be/Xb0wAMAGAHE)
 
 ### Apply Text Shadows
 
 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
-<h1 class="text-4xl text-shadow ">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-4xl text-shadow ">Hello, Tailwind CSS!</h1>
 ```
 
 ### Text shadow blur modifier
 
-To make the spread or blur bigger add the ```.text-shadow-blur-{value}```
+To make the spread or blur bigger add the `.text-shadow-blur-{value}`
 
 ```html
-<h1 class="text-4xl text-shadow text-shadow-blur-2 ">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-4xl text-shadow text-shadow-blur-2 ">Hello, Tailwind CSS!</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}```
+The shadow can be moved on the xy axis using `.text-shadow-x-{value}` and `.text-shadow-y-{value}`
 
 ```html
-<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red">Hello, Tailwind CSS!</h1>
 ```
 
 ### Text shadow color modifier
 
 ```html
-<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red-500">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red-500">Hello, Tailwind CSS!</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,
+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.
 
@@ -152,21 +144,15 @@ text-shadow-blur-2 classes customize the horizontal offset, vertical offset, and
 To change the opacity of the text-shadow-color use the following method
 
 ```html
-<h1 class="text-shadow text-shadow-red-500/10">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-shadow text-shadow-red-500/10">Hello, Tailwind CSS!</h1>
 
 <!-- with  arbitrary values -->
 
-<h1 class="text-shadow text-shadow-red-[rgb(0,0,0,0.5)]">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-shadow text-shadow-red-[rgb(0,0,0,0.5)]">Hello, Tailwind CSS!</h1>
 
 <!-- or arbitrary with / -->
 
-<h1 class="text-shadow text-shadow-red-[gray]/20">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-shadow text-shadow-red-[gray]/20">Hello, Tailwind CSS!</h1>
 ```
 
 > **Warning**
@@ -184,19 +170,15 @@ module.exports = {
 
 ### 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-long``` or ```.text-shadow-long-{size}``` or  ```.text-shadow-long-[steps]```
+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
-<h1 class="text-shadow-long text-shadow-blur-2 text-shadow-red">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-shadow-sm text-shadow-blur-2 text-shadow-red">Hello, Tailwind CSS!</h1>
 <!-- or -->
-<h1 class="text-shadow-long-[1000]">
-    Hello, Tailwind CSS!
-</h1>
+<h1 class="text-shadow-[1000]">Hello, Tailwind CSS!</h1>
 ```
 
-[![Tailwindcss text-shadow tutorial](play-thumbnail-text-shadow.png)](https://youtu.be/quyJpz5dtcs)
+[![Tailwindcss text-shadow tutorial](img/play-thumbnail-text-shadow.png)](https://youtu.be/quyJpz5dtcs)
 
 ## Customization
 
@@ -209,7 +191,6 @@ shadow.
 // tailwind.config.js
 module.exports = {
     theme: {
-        experimental: false,
         textShadowSteps: {
             sm: "1px",
             md: "2px",
@@ -222,7 +203,7 @@ module.exports = {
             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.
@@ -232,12 +213,11 @@ In this example, we have customized the textShadowSteps object with only four st
 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
+
 <a href="https://github.com/DesignByCode/tailwindcss-text-shadow/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=DesignByCode/tailwindcss-text-shadow" />
 </a>
 
-
-
 ## License
 
 This project is licensed under the [MIT](LICENCE) License - see the [LICENSE](LICENCE) file for details.
@@ -254,4 +234,3 @@ com/~designbycode_"> @designbycode_</a></li></ul>
 
 - This plugin is inspired by the needs of web developers using Tailwind CSS.
 - Special thanks to the Tailwind CSS team for creating such an amazing framework.
-

coverage/coverage-summary.json

@@ -1,3 +1,3 @@
 {"total": {"lines":{"total":7,"covered":7,"skipped":0,"pct":100},"statements":{"total":7,"covered":7,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"branches":{"total":2,"covered":2,"skipped":0,"pct":100},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"}}
-,"C:\\www\\npm-packages\\tailwindcss-text-shadow\\src\\generateShadows.ts": {"lines":{"total":7,"covered":7,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":7,"covered":7,"skipped":0,"pct":100},"branches":{"total":2,"covered":2,"skipped":0,"pct":100}}
+,"C:\\www\\npm-packages\\packages\\tailwindcss-text-shadow\\src\\generateShadows.ts": {"lines":{"total":7,"covered":7,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":7,"covered":7,"skipped":0,"pct":100},"branches":{"total":2,"covered":2,"skipped":0,"pct":100}}
 }