Tailwind screen函数触发Sass编译错误，请求排查解决

在global.scss中使用Tailwind的screen()函数编写媒体查询时，Sass编译器报错，代码及配置如下：

全局样式文件 global.scss #

@tailwind base;
@tailwind components;
@tailwind utilities;

.h-main {
  font-size: 74px;
  font-weight: 600;
  color: white;

  @media screen(sm) { 
    font-size: 30px;
  }
}

Tailwind配置文件 tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
    screens: {
      'sm': '600px',
      'md': '900px',
      'lg': '1200px',
      'xl': '1536px',
      'xs': '0px',
    }
  },
  plugins: [],
}

编译器报错信息 #

SassError: expected "{".
   ╷
69 │   @media screen(sm) {
   │                ^
   ╵

核心原因 #

Tailwind的screen()是自定义Sass函数，直接写@media screen(sm)会被Sass当作无效CSS语法解析，必须通过插值让Sass识别函数，或者使用Tailwind提供的简化指令@screen。

方法1：使用Tailwind的@screen指令（推荐） #

这是最简洁的写法，Tailwind已经封装了媒体查询逻辑，直接替换原有代码即可：

@tailwind base;
@tailwind components;
@tailwind utilities;

.h-main {
  font-size: 74px;
  font-weight: 600;
  color: white;

  @screen sm { 
    font-size: 30px;
  }
}

方法2：使用插值调用screen()函数 #

如果一定要用screen()函数，需要先导入Tailwind的屏幕断点Sass文件，并用Sass插值#{}包裹函数调用：

@tailwind base;
@tailwind components;
@tailwind utilities;
// 导入Tailwind的Screens函数
@import "tailwindcss/screens";

.h-main {
  font-size: 74px;
  font-weight: 600;
  color: white;

  @media #{screen(sm)} { 
    font-size: 30px;
  }
}

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