@designbycode/tailwindcss-reflection

Tailwind CSS Reflection

!npm
!NPM
!npm bundle size
!ts


The Tailwind CSS plugin for adding reflections to elements.

📇 Table of Contents

* Installation
* Using pnpm
* Using npm
* Using yarn
* Usage
* Utilities
* Applying Reflections
* Configuration
* Example
* Modifiers
* Position and direction
* Reflection offset
* Reflection opacity
* Contributing
* License
* Author
* Acknowledgments

Installation

To use this plugin, you need to install it via pnpm, npm or yarn.

#### Using pnpm

``bash
pnpm add -D @designbycode/tailwindcss-reflection
`

#### Using npm

`bash
npm install --save-dev @designbycode/tailwindcss-reflection
`

#### Using yarn

`bash
yarn add -D @designbycode/tailwindcss-reflection
`

Usage

Once the plugin is installed, you can enable it in your Tailwind CSS configuration file. Usually, this file is named tailwind.config.js.

`javascript
module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-reflection"),
],
};
`

Utilities

The plugin generates several utility classes for applying reflection to elements.

Applying Reflections

To make it work you only need to add the class of `.reflect` to you html. The rest off the classes is just modifiers.

`html

`

Configuration

The plugin allows you to customize the text-glitch by modifying the theme object in your Tailwind CSS configuration file.

`javascript
// tailwind.config.js

module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-reflection"),
],
theme: {
position: {
none: "none",
above: "above",
below: "below",
left: "left",
right: "right",
},
offset: {
0: "0",
1: "0.25rem",
2: "0.5rem",
3: "0.75rem",
4: "1rem",
5: "1.5rem",
6: "2rem",
7: "3rem",
8: "4rem",
9: "5rem",
10: "6rem",
},
opacity: {
0: "0",
5: "0.05",
10: "0.1",
15: "0.15",
20: "0.2",
25: "0.25",
30: "0.3",
40: "0.4",
45: "0.45",
50: "0.5",
55: "0.55",
60: "0.6",
70: "0.7",
75: "0.75",
80: "0.8",
85: "0.85",
90: "0.9",
95: "0.95",
100: "1",
},
},
};

`

Example

Here's an example of how you can use the utility classes to apply reflections:

`html

Reflection

`

Modifiers

$3

Change position of reflection direction by using duration modifiers.

`html

Glitch Effect

`

$3

`html

Glitch Effect

// or

Glitch Effect

`

$3

`html

Glitch Effect

``

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.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Claude Myburgh

• Github: @designbycode
• Npm: @designbycode_

Acknowledgments

- 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.