如何在tailwind CSS中将图标的位置从左向右移动？

Question

我自己是顺风CSS的初学者。所以我对如何将这个关闭图标的位置从左侧更改为右侧感到震惊。如果可能的话，您也可以帮助我吗？我尝试了文档中的所有内容，但没有帮助。这是代码👇。我想要顺风 CSS 中的答案。

function Sidebar() {
  return (
    <div className="w-72 bg-white text-gray-100 shadow-lg">
      
      <div className="p-7 text-sm">
      <button className='text-slate-800 hover:text-white hover:bg-black rounded-full p-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer'>
      <SwitchHorizontalIcon className ='h-5 w-5' />
      </button>             
        <a className="flex items-center space-x-5 p-5 text-slate-800">
          <MusicNoteIcon className="h-5 w-5" />
          <p className="font-semibold hover:font-bold">
            Sovereignty Kingdom
          </p>
        </a>

        <nav className="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
          <HomeIcon className="h-5 w-5" />
          <p>Home</p>
        </nav>
        <nav className="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
          <TrendingUpIcon className="h-5 w-5" />
          <p>Trends</p>
        </nav>

      </div>
    
    </div>

  )
}

export default Sidebar```

Answer 1

如果您的意思只是

button

内的第一个图标，那么这就是您需要做的

首先，给第二个

div

（

button

的父级）这些类

flex flex-col

，然后为按钮添加

self-end

以使其向右对齐

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-72 bg-white text-gray-100 shadow-lg">
      
      <div class=" text-sm h-full flex flex-col ">
      <button class='text-slate-800 self-end hover:text-white hover:bg-black rounded-full p-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer'>
      <div class ='h-5 w-5 bg-red-500 rounded-full' />
      </button>             
        <a class="flex items-center space-x-5 p-5 text-slate-800">
          <MusicNoteIcon class="h-5 w-5" />
          <p class="font-semibold hover:font-bold">
            Sovereignty Kingdom
          </p>
        </a>

        <nav class="flex items-center space-x-3 rounded-lg p-3 text-slate-800 hover:bg-black hover:text-white my-2 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
          <HomeIcon class="h-5 w-5" />
          <p>Home</p>
        </nav>
        <nav class="flex items-center space-x-3 rounded-lg p-3  text-slate-800 hover:bg-black hover:text-white  transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200 cursor-pointer">
          <TrendingUpIcon class="h-5 w-5" />
          <p>Trends</p>
        </nav>

      </div>
    
    </div>

Answer 2

如果您的图标是按钮或锚点的子元素，那么这就是方法

    <a href="#" className="group flex items-center">
         <span className="text-sm font-semibold text-blue-100">
            NEXT POSTCARD
         </span>
         <img
         src="/arrow-right.png"
         alt=""
         className="ms-1 translate-x-0 relative transition duration-150 ease-in-out group-hover:transition group-hover:duration-150 group-hover:ease-in-out group-hover:translate-x-2"/>
    </a>