使用样式化组件有条件地覆盖Tailwind实用程序类

Question

我可以使用样式化组件道具来覆盖顺风工具吗？即：如果我想根据屏幕尺寸将布局从display：grid更改为display：flex

<div className="container grid grid-cols-3 grid-rows-3">

所以我有一个具有设备大小的组件：

const size = {
  mobileS: "320px",
  mobileM: "375px",
  mobileL: "425px",
  tablet: "768px",
  laptop: "1024px",
  laptopL: "1440px",
  desktop: "2560px",
}

export const device = {
  mobileS: `(min-width: ${size.mobileS})`,
  mobileM: `(min-width: ${size.mobileM})`,
  mobileL: `(min-width: ${size.mobileL})`,
  tablet: `(min-width: ${size.tablet})`,
  laptop: `(min-width: ${size.laptop})`,
  laptopL: `(min-width: ${size.laptopL})`,
  desktop: `(min-width: ${size.desktop})`,
  desktopL: `(min-width: ${size.desktop})`,
}

我想做类似的事情：

const FormWrapper = styled.div`
  color: ${props => {
    device.tablet ? ${tw`flex`} : ${tw`container grid grid-cols-3 grid-rows-3`}
  }}
`

这可能吗？