Styles not applying on front-end

[distributev]

I gave on purpose the same name as #64

Things might be related (or might not)

I am using this theme and mostly the Website does look like Tailwind is correctly being applied.

However

When, in a page, I add a "Custom HTML" block like

  <button className="relative px-6 py-2 group">
        <span className="absolute inset-0 w-full h-full transition duration-300 ease-out transform translate-x-1 translate-y-1 bg-black group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
        <span className="absolute inset-0 w-full h-full bg-white border-2 border-black group-hover:bg-black"></span>
        <span className="relative text-black group-hover:text-white">
          <a href="https://www.example.org" target="_blank">
            Some Test
          </a>
        </span>
      </button>

In the front-end I see only the <a URL like Some Text and there is no button visible.

If I add exactly the same piece of code on another (static) Tailwind website I see a nice looking Tailwind button.

Initially I thought that this is happening because I use the npm run prod command which, at build time, is stripping from the production css and js "the CSS and JS code which is not being used" and then, when I use some special CSS classes in the front-end custom HTML blocks, most of the tailwind css was stripped off during npm run prod and is not being available anymore.

It might work if instead of npm run prod I use npm run dev?

Then I also found the existing #64 and I though that this might happen also.

Is this a bug or it is something which I don't understand about _tw?

[distributev]

After taking one by one all of the existing issue I found that many are related

#11
#3
#24
#3

It seems to be that the first npm run prod will strip off almost anything and compile to a very minimum tailwind (almost unusable) and then then lots of other tailwind css styles which you'll try to use later will not get applied (unless you safelist a huge list of css classes, almost all tailwind css classes?, after the fact which seems strange)

is there something I miss?

[gregsullivan]

Hello again!

I think the documentation section on arbitrary classes in the block editor should address your question; please take a look and let me know!

_tw uses Tailwind's own approach to optimizing for production, so the purging of unused styles is intended.

For the client work that I do, I wouldn't want clients to be adding any of their own classes in the block editor. Instead, I create custom blocks or patterns with the appropriate classes, and the HTML for those blocks or patterns is somewhere in my project repository where Tailwind can pick up the classes so they're included.

I'll convert this to a discussion in case you have any other questions!