Perspective

Utilities for specifying the perspective for an element.

Class	Properties
perspective-0	perspective: 0px
perspective-200	perspective: 200px
perspective-400	perspective: 400px
perspective-600	perspective: 600px
perspective-800	perspective: 800px
perspective-1000	perspective: 1000px
perspective-1200	perspective: 1200px
perspective-1400	perspective: 1400px
perspective-1600	perspective: 1600px

Basic Usage

You can use perspective- classes on the parent to set the desired perspective value for the child.

perspective-400

transform rotate-y-30

perspective-800

transform rotate-y-30

perspective-1600

transform rotate-y-30

Effect of using different perspective values

<div class="flex">
  <div class="perspective-400">
    <div class="transform rotate-y-30">
      <!-- ... -->
      <p>transform rotate-y-30</p>
    </div>
  </div>
  <div class="perspective-800">
    <div class="transform rotate-y-30">
      <!-- ... -->
      <p>transform rotate-y-30</p>
    </div>
  </div>
  <div class="perspective-1600">
    <div class="transform rotate-y-30">
      <!-- ... -->
      <p>transform rotate-y-30</p>
    </div>
  </div>
</div>

Customizing Your Theme

Plugin configures the default theme with key perspective with values from 0 to 1600. You customize this value by editing theme.perspective in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      perspective: {
        300: '300px',
      }
    }
  }
}

Arbitrary Values

You can add an arbitrary value for perpective in your html file in the following way.

<div class="perspective-[300px]">
<!-- Your code --->
</div>

Learn more about arbitrary values from using arbitrary values.

Read More

Perspective sets the distance how far the user is placed to relative to z=0 plane. Read more on perspective.

info

You can use modifiers such as md:perspective-800 to target media queries, hover, active... etc. You can read about modifiers here.