Tailwind如何在SCSS文件中引用tailwind.config.js的配置变量

该需求完全可以实现，以下是两种可直接落地的实现方案：

适配Vite、Webpack等所有主流构建工具，无需手动引入变量文件，所有SCSS文件可直接使用断点变量。

Vite 配置示例 #

// vite.config.js
import { defineConfig } from 'vite'
import tailwindConfig from './tailwind.config.js'
// 如果tailwind配置用了extend/函数逻辑，引入官方解析工具
import { resolveConfig } from 'tailwindcss/resolveConfig'

// 解析得到最终完整的tailwind配置
const fullTailwindConfig = resolveConfig(tailwindConfig)
// 把断点转成SCSS变量格式
const screenScssVars = Object.entries(fullTailwindConfig.theme.screens)
  .map(([key, value]) => `$${key}: ${value};`)
  .join('\n')

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 所有SCSS文件自动注入变量，无需手动引入
        additionalData: screenScssVars
      }
    }
  }
  // 其他项目配置
})

Webpack 配置示例 #

// webpack.config.js
const tailwindConfig = require('./tailwind.config.js')
const { resolveConfig } = require('tailwindcss/resolveConfig')
const fullTailwindConfig = resolveConfig(tailwindConfig)
const screenScssVars = Object.entries(fullTailwindConfig.theme.screens)
  .map(([key, value]) => `$${key}: ${value};`)
  .join('\n')

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: screenScssVars
            }
          }
        ]
      }
    ]
  }
  // 其他项目配置
}

适合仅需要在部分SCSS文件中使用断点变量、不想注入全局变量的场景。

1. 项目根目录新建变量生成脚本gen-tailwind-scss-vars.js：

const fs = require('fs')
const { resolveConfig } = require('tailwindcss/resolveConfig')
const tailwindConfig = require('./tailwind.config.js')
const fullTailwindConfig = resolveConfig(tailwindConfig)

const scssContent = `/* 自动生成的tailwind断点变量，请勿手动修改 */
${Object.entries(fullTailwindConfig.theme.screens)
  .map(([key, value]) => `$${key}: ${value};`)
  .join('\n')}
`

// 输出到指定路径，可自行修改
fs.writeFileSync('./src/styles/tailwind-screens.scss', scssContent)

2. 修改package.json的启动/构建命令，每次执行前自动生成最新变量：

{
  "scripts": {
    "dev": "node gen-tailwind-scss-vars.js && vite",
    "build": "node gen-tailwind-scss-vars.js && vite build"
  }
}

3. 使用时在需要的SCSS文件中引入即可：

@import '@/styles/tailwind-screens.scss';

@media (min-width: $sm) {
  html {
    width: 100vw;
  }
}

• 若你的Tailwind配置仅用了基础的固定screens配置，不需要特殊逻辑，可以省略resolveConfig解析步骤，直接读取tailwindConfig.theme.screens即可
• 两种方案都会自动同步Tailwind配置的断点修改，不需要手动调整SCSS变量值

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