Revision history [back]

Here are the steps to create a fixed right-hand side bar on a modal using tailwindcss:

1. Create a modal container using the fixed and z-50 classes:

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-50"></div>

1. Inside the modal container, create a div for the actual modal content:

<div class="fixed right-0 top-0 bg-white w-1/3 h-full z-50">
  <!-- modal content goes here -->
</div>

1. Add the right-0 class to the modal container to position it on the right side of the screen.

2. Use the top-0 class to position the modal content at the top of the screen.

3. Add a bg-white class to the modal content to give it a white background.

4. Set the width of the modal content using w-1/3.

5. The h-full class will make the modal content take up the full height of the screen.

6. Finally, use the z-50 class to make the modal stack on top of all other elements on the page.

Your final code should look something like this:

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-50">
  <div class="fixed right-0 top-0 bg-white w-1/3 h-full z-50">
    <!-- modal content goes here -->
  </div>
</div>