Why are inline styles discouraged?

[hyperknot]

The docs says that I shouldn't really be using inline styles with Tailwind, but I wonder why is this the case?
At any point, is there a JS runtime function which modifies the style property? If not, why is it the problem?

I mean obviously if try to set the same CSS property then there is a conflict, but that's like that in vanilla HTML/CSS. What's so special about Tailwind's handling that inline styles are discouraged?

I find this quite a nice DX:

export const Chat: Component = () => {
  return (
    <>
      {uiStore.state.sidebarIsOpen && <Sidebar />}
      <div
        class="flex-1 grid"
        style={{
          'grid-template-columns': `repeat(${uiStore.getCalculatedDisplayColumns()}, minmax(${MIN_COLUMN_WIDTH}px, 1fr))`,
        }}
      >
        ...
      </div>
    </>
  )
}

Is there anything wrong with it?

[wongjn]

No, there's nothing wrong with it - the docs encourage the same usage.

You may be getting confused with this page which is making an argument about using Tailwind as a whole vs only inline styles.

[hyperknot]

Thank you, it's good to know!