Replies: 2 comments 2 replies
-
I believe that is simply how |
Beta Was this translation helpful? Give feedback.
-
For reference, in GitHub, you can format your code by surrounding it with 3 backticks. You can also specify the language to add appropriate syntax highlighting. For example, the following
will render like this: export function Checklist({ listItems }: Props) {
return (
<ul className="list-image-[url(/icons/check-yellow.svg)] pl-10">
{
listItems.map((item, i) => {
return ( <li key={i} className="mb-4 pl-4"> {item} </li> );
})
}
</ul>
);
} Note: I'm not 100% sure if this is valid JSX syntax, but I'm just trying to show you how to format it 😄 You can learn more in the docs: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks |
Beta Was this translation helpful? Give feedback.
-
Hello,
I tried using the new list-image-[-url] class but it seems to add spacing to my icon on the bottom side? It does not have this extra spacing in the icon itself, it does that to every icon I have used for this case
When I use
list-disc
the list icon get centered like it should. See Image:Am I missing something?
The code that generates this is the following:
export function Checklist({ listItems }: Props) { return ( <ul className="list-image-[url(/icons/check-yellow.svg)] pl-10"> {listItems.map((item, i) => { return ( <li key={i} className="mb-4 pl-4"> {item} </li> ); })} </ul> ); }
I can't seem to format the code well in here so I add another screenshot for the code:
Using TailwindCss: 3.3.0
Thanks in advance.
Beta Was this translation helpful? Give feedback.
All reactions