如何将Tailwind v3的print:和screen:变体转换为新@theme样式？

操作步骤： #

1. 先删除tailwind.config.js中原来的screens配置段：

// 移除这段代码
screens: {
  print: { raw: "print" },
  screen: { raw: "screen" },
},

2. 在你的全局CSS文件（比如global.css）中，使用@theme指令定义对应的断点规则：

@theme {
  /* 定义print断点 */
  @media print {
    :root {
      --tw-breakpoint: print;
    }
  }
  /* 定义screen断点 */
  @media screen {
    :root {
      --tw-breakpoint: screen;
    }
  }
}

说明： #

配置完成后，你依然可以像之前一样使用print:和screen:前缀编写响应式样式，比如print:text-gray-800、screen:bg-gray-100，效果和原来的JS配置完全一致。

注意要确保这个CSS文件已被Tailwind编译流程包含（比如在tailwind.config.js的content或css配置项中指定）。

内容的提问来源于stack exchange，提问作者Ian Vink