CSS spacing - using tailwinds-CodePudding

I have an unordered list with 4 list items. I want to move the fist item a little to the right and then leave it there but the other 3 items I want them to have more space. How would I achieve this in css.

<ul className="mx-8 flex">
  <li>&copy;2022 Airoflair</li>
  <li>Cookie Policy</li>
  <li>Refund Policy</li>
  <li>Privacy Policy</li>
  <li>terms & Conditions</li>
</ul>

So far this is my css:

li {
  font-size: 10px;
  margin-left: 30px;
}

CodePudding user response：

If you are using Tailwind css you can add the padding left class. https://tailwindcss.com/docs/padding the p is for padding, the l if for left side and the 8 is for how much padding, the docs link also specifies how to use a custom amount of padding

<ul className="mx-8 flex">
   <li >&copy;2022 Airoflair</li>
   <li>Cookie Policy</li>
   <li>Refund Policy</li>
   <li>Privacy Policy</li>
   <li>terms & Conditions</li>
</ul>

and then without tailwind you could get the same result by changing the style like

<ul className="mx-8 flex">
    <li style="padding-left: 2rem;">&copy;2022 Airoflair</li>
    <li>Cookie Policy</li>
    <li>Refund Policy</li>
    <li>Privacy Policy</li>
    <li>terms & Conditions</li>
</ul>

CodePudding user response：

You probably want to use pseudo-classes: https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes. This will only affect the first child.

<ul className="mx-8 flex first:pl-8">
    <li>&copy;2022 Airoflair</li>
    <li>Cookie Policy</li>
    <li>Refund Policy</li>
    <li>Privacy Policy</li>
    <li>terms & Conditions</li>
</ul>