How can I change Tailwind Element's component parameters

Question

I using Tailwind Element's sidebar component which appears and disappears when a button is clicked. The sidebar which appears has a fixed width of 240px and I want change this width. I can't find where can I change it. The component has this structure

<nav id="cart-nav" style="width: 240px; height: 100vh; position: fixed; transition: all 0.3s linear 0s; transform: translateX(0%);" class="fixed right-0 top-0 z-[1035] h-screen w-96 translate-x-full overflow-hidden bg-white shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)] data-[te-sidenav-hidden='false']:-translate-x-0 sidenav-primary group/ps [overflow-anchor:none] [overflow-style:none] touch-none" data-te-sidenav-init="" data-te-sidenav-hidden="true" data-te-sidenav-right="true"></nav>

The style parameter can only be seen in the browser inspector and not in the code editor. When I write style:350px, it is removed and overwritten with style: 240px.

How can I change this width parameter?

Answer 1

It seems like that is the sidebar from Tailwind Elements, not the Tailwind library itself.

As per the documentation, you can customize the sidebar width by setting the sidebarWidth option. Since you seem to be using the attributes technique to add options, you would add data-te-sidebarnav-width="350" to change the width to 350px:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<nav id="cart-nav" class="fixed right-0 top-0 z-[1035] h-screen w-96 translate-x-full overflow-hidden bg-white shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)] data-[te-sidenav-hidden='false']:-translate-x-0 sidenav-primary group/ps [overflow-anchor:none] [overflow-style:none] touch-none" data-te-sidenav-init="" data-te-sidenav-hidden="false" data-te-sidenav-right="true" data-te-sidenav-width="350"></nav>

<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>