Tailwindcss Perspective

Theme by Kamona wd

|

Updated: 8 Feb 2022

|

127 Stars

A little bit of utility classes related to css 3d transform

Overview:

The @kamona/tailwindcss-perspective is a utility plugin for Tailwind CSS that offers classes related to CSS 3D transform. It is designed to work with Tailwind CSS in ‘jit’ mode and is not yet compatible with Tailwind CSS v3.

Features:

• Perspective Classes: Includes classes like perspective-1, perspective-2, up to perspective-10 with varying perspective values.
• Rotate and Translate Classes: Offers classes for rotate-x, rotate-y, rotate-z, translate-x, translate-y, and translate-z.
• Transform-Style-3d Class: Introduces the transform-style-3d class to allow children elements to inherit a parent’s perspective.
• Perspective Origin Classes: Includes classes for setting perspective origins like perspective-origin-center, perspective-origin-top, etc.

Installation:

To install the @kamona/tailwindcss-perspective plugin, you need to follow these steps:

1. Install the plugin from npm:

   npm install @kamona/tailwindcss-perspective
   

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

   module.exports = {
     // Other Tailwind CSS configurations
     plugins: [
       require('@kamona/tailwindcss-perspective'),
     ],
   }
   

Summary:

The @kamona/tailwindcss-perspective is a Tailwind CSS plugin that enhances CSS 3D transform capabilities by providing utility classes for perspective, rotation, translation, and perspective origins. It is specifically designed to work in ‘jit’ mode and not yet compatible with Tailwind CSS v3. This plugin can be a useful addition for developers looking to incorporate 3D transformations into their projects efficiently.