使用 Tailwind CSS 进行类似聊天的 UI？
Make a Chat-like UI using Tailwind CSS?
我想要一个类似聊天的简单 UI，聊天可以滚动，最后有 2 个按钮。
目前看起来像：
完整复制→https://play.tailwindcss.com/mKgRCKKVBq
代码如下：
<aside class="flex flex-col min-h-full bg-gray-900 text-white">
<p class="overflow-y-scroll flex-1">
They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time. They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time.
</p>
<div class="flex items-center justify-between mt-auto h-20 bg-pink-900">
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-green-600 focus:outline-none"
>
Later
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-indigo-600 focus:outline-none"
>
Send
</button>
</div>
</aside>
我只想使用 100% 的高度。按钮卡在底部。
我也想垂直滚动聊天。
我希望 HTML 标记保持原样。我认为我不需要更改标记中的任何内容即可达到相同的效果。
应该怎么做？
我只需要改变一件事。外部容器应该使用 h-screen 而不是 min-h-full 像：
<aside class="flex flex-col h-screen bg-gray-900 text-white">
<p class="overflow-y-scroll flex-1">
They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time. They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time.
</p>
<div class="flex items-center justify-between mt-auto h-20 bg-pink-900">
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-green-600 focus:outline-none"
>
Later
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-indigo-600 focus:outline-none"
>
Send
</button>
</div>
</aside>
您所需要的只是坚持正确的定位。即
在带有 bg-pink-900 class 的 div 上，添加此 classes sticky bottom-0 left-0 right-0，如下所示：
<aside class="flex flex-col min-h-full bg-gray-900 text-white">
<p class="overflow-y-scroll flex-1">
They floated in the human system. [and many more strings...]
</p>
<div class="flex items-center justify-between mt-auto h-20 bg-pink-900 sticky bottom-0 left-0 right-0">
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-green-600 focus:outline-none"
>
Later
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-indigo-600 focus:outline-none"
>
Send
</button>
</div>
</aside>
我想要一个类似聊天的简单 UI，聊天可以滚动，最后有 2 个按钮。
目前看起来像：
完整复制→https://play.tailwindcss.com/mKgRCKKVBq
代码如下：
<aside class="flex flex-col min-h-full bg-gray-900 text-white">
<p class="overflow-y-scroll flex-1">
They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time. They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time.
</p>
<div class="flex items-center justify-between mt-auto h-20 bg-pink-900">
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-green-600 focus:outline-none"
>
Later
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-indigo-600 focus:outline-none"
>
Send
</button>
</div>
</aside>
我只想使用 100% 的高度。按钮卡在底部。
我也想垂直滚动聊天。
我希望 HTML 标记保持原样。我认为我不需要更改标记中的任何内容即可达到相同的效果。
应该怎么做？
我只需要改变一件事。外部容器应该使用 h-screen 而不是 min-h-full 像：
<aside class="flex flex-col h-screen bg-gray-900 text-white">
<p class="overflow-y-scroll flex-1">
They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time. They floated in the human system. They floated in the Japanese night like live wire voodoo and he’d cry for it, cry in his sleep, and wake alone in the human system. Then a mist closed over the black water and the amplified breathing of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a painted jungle of rainbow foliage, a lurid communal mural that completely covered the hull of the spherical chamber. Her cheekbones flaring scarlet as Wizard’s Castle burned, forehead drenched with azure when Munich fell to the Tank War, mouth touched with hot gold as a paid killer in the puppet place had been a subunit of Freeside’s security system. The knives seemed to move of their own accord, gliding with a random collection of European furniture, as though Deane had once intended to use the place as his home. That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the dripping chassis of a heroin factory. He tried to walk past her back into the dark, curled in his capsule in some coffin hotel, his hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn’t there.They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the blowers and the amplified breathing of the fighters. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the shadow of the console. None of that prepared him for the arena, the crowd, the tense hush, the towering puppets of light from a service hatch framed a heap of discarded fiber optics and the chassis of a junked console. Then he’d taken a long and pointless walk along the port’s security perimeter, watching the gulls turn circles beyond the chain link. The Sprawl was a square of faint light. The alarm still oscillated, louder here, the rear of the console in faded pinks and yellows. A narrow wedge of light from a half-open service hatch at the twin mirrors. The knives seemed to move of their own accord, gliding with a hand on his chest. A graphic representation of data abstracted from the Chinese program’s thrust, a worrying impression of solid fluidity, as though the shards of a broken mirror bent and elongated as they rotated, but it never told the correct time.
</p>
<div class="flex items-center justify-between mt-auto h-20 bg-pink-900">
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-green-600 focus:outline-none"
>
Later
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-indigo-600 focus:outline-none"
>
Send
</button>
</div>
</aside>
您所需要的只是坚持正确的定位。即
在带有 bg-pink-900 class 的 div 上，添加此 classes sticky bottom-0 left-0 right-0，如下所示：
<aside class="flex flex-col min-h-full bg-gray-900 text-white">
<p class="overflow-y-scroll flex-1">
They floated in the human system. [and many more strings...]
</p>
<div class="flex items-center justify-between mt-auto h-20 bg-pink-900 sticky bottom-0 left-0 right-0">
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-green-600 focus:outline-none"
>
Later
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-1 px-3 mx-4 mt-0 text-sm font-medium leading-4 text-white rounded-lg shadow-sm h-9 dark:bg-indigo-600 focus:outline-none"
>
Send
</button>
</div>
</aside>