Tailwind screen 函数破坏了 sass 编译器

Question

我的 global.scss 中使用了 screen 函数

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

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

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

这是我的顺风配置

/** @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: [],
  
}

sass 编译器给我这个错误：

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

就像它不识别顺风功能一样。我错过了什么？

文档

我期望的是 screen 函数会在 tailwind 配置中指定的断点上生成媒体查询，如文档中所述。

Answer 1

SCSS 语法似乎不允许

screen()

功能。作为解决方法，您可以考虑在常规媒体查询中使用

theme()

：

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

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

  @media (min-width: theme('screens.sm')) {
    font-size: 30px;
  }
}

在 this Sass Playground 中看到编译成功。

Answer 2

将 Tailwind 与 SASS 一起使用时，您需要用括号将 screen 函数括起来，如下所示：

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

更多信息：https://tailwindcss.com/docs/using-with-preprocessors#sass