Stencil与Tailwind集成问题：渐变变量为空及热重载失效

现有配置文件 #

package.json #

{
  "scripts": {
    "start": "npm run build:tailwind-dev --watch && stencil build --dev --watch --serve",
    "build:tailwind-dev": "postcss --postcss-config ./postcss.config.js src/global/app.css -o src/styles/tailwind-optimized.css",
    "watch:tailwind-dev": "postcss --postcss-config ./postcss.config.js src/global/app.css -o src/styles/tailwind-optimized.css --watch"
  },
  "dependencies": {
    "@stencil/core": "^4.7.0",
    "autoprefixer": "^10.4.18",
    "postcss": "^8.4.35",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "@types/jest": "^29.5.6",
    "@types/node": "^16.18.11"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

stencil.config.ts #

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'exploration-project-tailwind',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.js #

module.exports = {
  content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
  theme: {},
  variants: {
    extend: {
      backgroundColor: ['active'],
      backgroundOpacity: ['active'],
      gradientColorStops: ['active'],
    },
  },
  plugins: [],
};

app.css #

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

组件相关文件 #

stencil-component.tsx（片段）

<div class="ccs-isp-transfer-flow__wrapper flex flex-col w-full items-center pt-10 bg-gradient-to-t from-violet-50 to-white"></div>

stencil-component.css

@import '../../styles/tailwind-optimized.css';

:host {
  display: block;
}

生成的tailwind-optimized.css（部分）

--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position:  ;
--tw-gradient-via-position:  ;
--tw-gradient-to-position:  ;
--tw-ordinal:  ;
--tw-slashed-zero:  ;
--tw-numeric-figure:  ;
--tw-numeric-spacing:  ;
--tw-numeric-fraction:  ;
--tw-ring-inset:  ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;

问题及解决方案 #

问题1：渐变CSS变量值为空，但组件中渐变类可正常生效 #

这是Tailwind JIT模式的正常表现：

• Tailwind会预先生成所有可能用到的CSS变量占位，但只有当代码中实际使用了依赖该变量的样式时，才会填充具体值。
• 你用到的bg-gradient-to-t from-violet-50 to-white类，Tailwind已经生成了对应的具体渐变样式（不依赖这些空变量），所以组件样式能正常工作，空变量不会影响功能。
• 无需额外配置，若想避免空变量，可清理tailwind.config.js中未使用的主题扩展，但这不是必要操作。

问题2：新增样式类需重启服务器才生效 #

当前start脚本用&&串行执行命令，导致stencil build无法启动（因为build:tailwind-dev --watch会持续运行），实际未开启Stencil的热重载。解决步骤：

1. 安装并行任务工具：

npm install concurrently --save-dev

2. 修改package.json中的start脚本，同时运行两个watch任务：

"start": "concurrently \"npm run watch:tailwind-dev\" \"stencil build --dev --watch --serve\""

3. 重启npm start，之后新增Tailwind类时，Tailwind会自动重新编译CSS，Stencil会检测到CSS变化并触发热重载，无需手动重启服务器。

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