Plain HTML files are not supported

[ohkimur]

It seems that plain html files, like index.html are not supported. Also, global CSS/Sass/Scss files are not supported. The @apply utility doesn't work.

[Poimen]

So the index.html is not processed by the Stencil compiler so nothing much can do about that one.

The global css is also not passed through the compiler in the traditional sense. However, it should be possible to use the postcss plugin: https://github.com/stencil-community/stencil-postcss

Unfortunately it'll interfere with the main processing of the css file that use @apply. I'm not sure how much though, YMMV.

You could write your own plugin provider that would only apply TW styles to the global file and ignore all the other css files.

I have just publish v1.5 that has a new plugin for doing this:

import tailwind, { tailwindHMR, tailwindGlobal } from 'stencil-tailwind-plugin';

// ... other config
export const config: Config = {
  globalStyle: 'src/styles/global.scss',
  outputTargets: [
    // targets
  ],
  plugins: [
    sass(),
    // This takes the same configuration options as the main plugin. You can use different configurations if you want 
    tailwindGlobal({
      tailwindCssPath: './src/styles/tailwind.pcss',
      tailwindConf: tailwindConfig,
      postcss: {
        plugins: [
          atImport(),
          tailwindcss(),
          autoprefixer()
        ]
      }
    }),
    tailwind({
      tailwindCssPath: './src/styles/tailwind.pcss',
      tailwindConf: tailwindConfig,
      postcss: {
        plugins: [
          atImport(),
          tailwindcss(),
          autoprefixer()
        ]
      }
    }),
    tailwindHMR()
  ]
};

I don't use TW styles in the global configuration, so hopefully it'll output how you are expecting it to.

If it doesn't resolve your issue, please reopen.

Thanks.

[ohkimur]

@Poimen Thanks!