如何在Next.js+Tailwind CSS中将ul元素置于页面左侧？

你的问题核心在于父容器的flex布局属性导致ul元素被强制居中，进而让mr-24无法生效。具体来说，外层section设置了flex flex-col justify-center items-center，其中items-center会让所有子元素在水平方向上居中对齐，即使你给ul加了text-left，也只是让内部文本左对齐，整个ul元素本身还是处于页面水平居中状态，此时右外边距无法直观体现效果。

下面提供两种可行的解决方案：

方案一：修改外层section的对齐方式 #

如果希望整个section内的元素都左对齐，直接把items-center改成items-start，这样所有子元素都会沿水平方向左对齐，ul的mr-24就能正常生效：

<section class="px-4 lg:px-20 flex flex-col justify-center items-start">
    <h1 class="font-sans font-bold text-4xl md:text-5xl lg:text-4xl leading-loose text-white-800 mt-20">Website</h1>
    <div class="text-white-800 mt-20">
        <h1 className='font-sans font-bold text-4xl md:text-5xl lg:text-4xl leading-loose text-white-800 mb-6'>Nextjs</h1>
        <ul class="list-disc mr-24 text-left">
            <li>First bullet point</li>
            <li>Second bullet point</li>
            <li>Third bullet point</li>
        </ul>
    </div>
</section>

方案二：单独调整ul所在的div #

如果不想改变整个section的对齐方式，只想让ul所在的区块左对齐，给包裹ul的div添加self-start类，这个类会让该div在flex容器中打破items-center的全局设置，单独左对齐：

<section class="px-4 lg:px-20 flex flex-col justify-center items-center">
    <h1 class="font-sans font-bold text-4xl md:text-5xl lg:text-4xl leading-loose text-white-800 mt-20">Website</h1>
    <div class="text-white-800 mt-20 self-start">
        <h1 className='font-sans font-bold text-4xl md:text-5xl lg:text-4xl leading-loose text-white-800 mb-6'>Nextjs</h1>
        <ul class="list-disc mr-24 text-left">
            <li>First bullet point</li>
            <li>Second bullet point</li>
            <li>Third bullet point</li>
        </ul>
    </div>
</section>

两种方案都能实现ul元素左对齐且右外边距生效的效果，你可以根据整体页面布局需求选择其中一种。

内容的提问来源于stack exchange，提问作者user21687269