TailwindCSS Reflection Plugin

The Tailwind CSS plugin for adding reflections to elements.

#Installation

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

#Using pnpm

pnpm add -D @designbycode/tailwindcss-reflection

#Using npm

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

#Using yarn

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.

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.

<div class="reflect"></div>

#Configuration

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

// 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:

<div class="reflect reflect-opacity-15 reflect-offset-2">
  Reflection
</div>

#Modifiers

#Position and direction

Change position of reflection direction by using duration modifiers.

<div class="reflect reflect-left">
  Reflection
</div>

#Reflection offset

<div class="reflect reflect-offset-3">
  Reflection
</div>
// or
<div class="reflect reflect-offset-[10px]">
  Reflection
</div>

#Reflection opacity

<div class="reflect reflect-below reflect-opacity-5">
  Reflection
</div>

#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 Tailwind CSS.
• Special thanks to the Tailwind CSS team for creating such an amazing framework.