Stencil and Tailwind Integration - Gradient Variables Returning Blank

Question

I'm not deeply familiar with Tailwind configuration, but the problem I'm facing seems to be related to configuration, as most of what I've set up is working.

Here's the basic setup:

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';

src/styles/tailwind-optimized.css (partial output)

  --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;

stencil-component.tsx (partial example):

        <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">

stencil-component.css

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

:host {
  display: block;
}

Problem

The problem is that, when I run the tailwind build script npm run build:tailwind-dev, the output file doesn't include the gradient CSS variable values that were supposed to exist, even though the classes are being applied correctly in the stencil component.

  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;

All other classes that I use, get included in the output, so I guess the core functionality is working.

Is there anything I might be missing in the configuration?

Also, another issue: when I run the npm start script, it loads the dev server. However, each time I include a new class in the component, I have to restart the server for the changes to take effect. Is there a way to make the server reload the changes automatically?