Tailwindcss in Stencil JS

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.

Compile the components yourself but then without shadow dom?


Manually setting shadow to false?

I agree. That works, but then we loose the main purpose of using the components with shadow which is isolating it from the surrounding.

Understood. The svelte solution to this is to add a hash to the css class names making it virtually impossible to get confusion snd mixture or css classes

You mean applying styles direct to ID to make sure they are unique?
Tailwind provides a chunk of css utilities in their compiled bundle. Let’s say I have .ml-5 which apply margin left 5 to any element. How can I make this available to any component without copying the entire utility css from tailwind into the component export?!

I don’t think this is possible at this point as it opposes the encapsulation purpose of Stencil web components. Correct me if I’m wrong.

I was meaning to say that, if you like the challenge, you could try to get encapsulation for ionic components by making the CSS it uses unique through adding a hash. But given the diversity of the css in ionic, I guess that isn’t a viable option.

Svelte compiler generates encapsulation not through shadow dom and css variables, but by generating unique css IDs per component.

So, no big help here for you from me, I suppose.

Are you expecting huge spilover effects from your CSS so this encapsultation is so extremely important?


I was able to reduce reduce the tailwindcss added to each component (in my case I had only one component in the project , but should work for more as well)

Added purgecss -> before the css file was 850Kb and after adding this 2Kb (depends on the number of classes used offcourse)

import { Config } from "@stencil/core";
import { postcss } from "@stencil/postcss";
import autoprefixer from "autoprefixer";

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

export const config: Config = {
  namespace: "header",
  outputTargets: [
      type: "dist",
      esmLoaderPath: "../loader"
      type: "docs-readme"
      type: "www",
      serviceWorker: null // disable service workers
  globalStyle: "src/global/styles.css",
  plugins: [
      plugins: [
        ...(process.env.NODE_ENV === "production"
          ? [purgecss, require("cssnano")]
          : [])
1 Like