@endorian/tailwindcss-plugin-twicpics weekly downloads statistics

tailwindcss-plugin-twicpics

A Tailwind CSS plugin to use TwicPics's Style-Driven Approach.

Note: This plugin requires Tailwind CSS as peer dependency.

⚙️ Configuration

Add the plugin to your tailwind.config.js file:

Using CommonJS

Using ES Modules

🛠️ Usage

This plugin adds multiple utility classes to your Tailwind CSS configuration to use TwicPics's Style-Driven Approach. These utility classes will add CSS variables to the element containing the class.

Mode

.twic-mode-{mode}

This utility allows you to set the mode.

Possible modes from TwicPics' documentation are:

• cover • contain

Position

.twic-position-{position}

This utility allows you to set the position.

Possible positions from TwicPics' documentation are:

• top • right • bottom • left • center • top-left • top-right • bottom-left • bottom-right

Ratio

.twic-ratio-{ratio}

This utility allows you to set the ratio.

Predefined values are:

• square (1) • video (16/9) • landscape (4/3) • portrait (2/3)

You can add your ratios by extending your Tailwind CSS configuration like in the following example:

Transition delay

.twic-delay-{delay}

This utility allows you to set the delay. Per default, you can use Tailwind's transition delays.

You can add your TwicPics-related delays by extending your Tailwind CSS configuration like in the following example:

Transition duration

.twic-duration-{duration}

This utility allows you to set the transition duration. Per default, you can use Tailwind's transition durations.

When you miss some durations, you can add your TwicPics-related durations by extending your Tailwind CSS configuration like in the following example:

Transition timing functions

.twic-{easing}

This utility allows you to set the transition timing function. Per default, you can use Tailwind's transition timing functions.

You can use your timing functions by extending your Tailwind CSS configuration, like in the following example:

Zoom

.twic-zoom-{zoom}

This utility allows you to set the zoom.

Predefined zooms are:

• 1

When you miss some zooms, you can add your TwicPics-related zooms by extending your Tailwind CSS configuration like in the following example:

📄 License and Contribution

This plugin is licensed under the MIT License. Feel free to contribute by creating a merge request or by opening an issue if you find a bug or want to request a feature.

Description from the npm listing.