How can I export all Tailwind classes?

[jhernandez-indigo]

Hi I am trying to use Tailwind by encapsulating the library inside a custom package which is going to be installed on different microfrontends.

This is my index.css

@import "tailwindcss";

@theme {
  --color-base: #609af8;
  --color-title: #295bac;
  --color-surface: #f4f4f5;
  --color-background: #000000;
  --color-primary: #4f46e5;
  --color-custom-yellow: #eee345;
}

@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .btn-primary:hover {
    @apply bg-blue-700;
  }
  .full-size {
    @apply w-full h-full;
  }
}

Right now it is only a proof of concept

Then when I compile the package and install on an FM, I try to use the utility classes and they don't work.

I was researching and there are recent changes where they worked to compile only the styles that are used in the project.

However, is there a possibility to configure Tailwind to export all classes ?

MF/src/index.css:

@import "infinity-styles/dist/index.css";

In the library project I have an App.tsx where I test the custom classes, that's why some of the colors and classes like btn-primary and full-size are exported in the index.css.

But classes like px-10, py-10 or others, don't work in the MF unless I install Tailwind and import its instance, but I don't want to have to do the same for all MFs, besides I'm already doing it in the index.css of my custom library.

Can someone please help me?

[wongjn]

However, is there a possibility to configure Tailwind to export all classes ?

No. There is an infinite amount of classes, due to:

• Arbitrary property classes, [foo:bar], where you can have an infinite amount of property permutations.
• Bare value classes, m-1234567890, where you can have an infinite amount of the integer value.
• Arbitrary variant classes, [&_.foo]:text-red-500, where you can have an infinite amount of character permutations in the [].
• Arbitrary sub-variant classes, data-[foo=bar]:text-red-500,
• Etc.

[jhernandez-indigo]

I understand, in that case what could I do to be able to reuse the Tailwind classes?

[wongjn]

• Integrate Tailwind into all the microfrontends.
• Have the library run Tailwind once for all the microfrontends.