Tailwindcss with Stencil JS

[edamianik]

I have a question related to best way to work Tailwindcss with stencil js. As we know Stencil Js makes use of Shadow DOM and thats when I run into issues. Importing all Tailwind css into the project, does not affect components incapsulated into the shadow DOM unless the tailwind imports are placed inside the component SCSS files which now creates another problem, where all components will have a duplication of the entire tailwind css chunk. So in other words to make use of Tailwindcss in Stencil components all components will have a copy of the entire precompiled Tailwind css in it, increasing file sizes. How can I set this up in a way that this does not occur. Thank you.

[sem4phor]

Hello, it is possible to configure purgecss to only hold on to the tailwindclasses needed by your stencil component.

// stencil.config.js
...
import { postcss } from '@stencil/postcss';
import postcssImport from 'postcss-import'
import tailwindcss from 'tailwindcss'
import postcssPresetEnv from 'postcss-preset-env'

import cssnano from 'cssnano'

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.tsx', './src/index.html', './src/**/*.pcss'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

export const config: Config = {
  ...
  plugins: [
    postcss({
      plugins: [
        postcssImport,
        tailwindcss,
        purgecss,
        cssnano
      ],
      injectGlobalPaths: [
        'src/assets/in-every-component.pcss'
      ]
    })
  ],
...