How can I switch to a new line after a comma in a text in tailwind?

Question

I'm trying to switch to a new line after the comma in the text, I couldn't make the tailwind settings. I will be glad if you help.According to my research on the internet, they use break-normal, but I couldn't find how to use it.

function TextZone() {
    const textList = [
        {letter:'H'},
        {letter:'i'},
        {letter:',',gap : true},
        {letter:'I'},
        {letter:'a'},
        {letter:'m'},
        ] 
  return (
     <> 
        <h1 className = {`text-white `}>
            {textList.map((text,index) => (
                <span key = {index}
                className = {`text-7xl`}>
                {text.letter}
                </span>
            ))}   
        </h1>
    </>
  )
}

export default TextZone

it is like: Hi,Iam
but I need

Hi,
I am

and this is my tailwind:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '5xl': '2560px',
      '7xl': '4560px',
    },
    colors: {
      'blue': '#1fb6ff',
      'white': '#FFFFFF',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'black': '#000000',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#282828 ',
      'gray': '#393939',
      'dark-purple': '#081A51',
      'gray-light': '#989898',
      'light-white': '#f4f5f7',
      'deep-orange': '#FF5A09 ',
      'light-orange': '#ec7f37 ',

    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
      mono: ['ui-monospace', 'SFMono-Regular'],
    },
    extend: {
     
    },
  },
  plugins: [],
}

I dont know. people use break-normal that is why I think its not working because of tailwind. So how can I do this separation? — İrfan Kaan ALGAN, May 30 '22 at 21:41
Why do you need to iterate over an array of letters rather than just writing the text out? — omid, May 30 '22 at 21:57

score 0 · Answer 1 · answered May 30 '22 at 22:18

You can't do it with CSS, and here's why.

You can add a conditional in your HTML, so when the gap is true, you can add a break element or anything else you want.

Like this:

<span key={index} className={`text-7xl`}>
  {text.letter}
  {text.gap ? <br /> : null}
</span>

How can I switch to a new line after a comma in a text in tailwind?

1 Answers1