Tailwind HTML Component and Custom Fonts

[qodesign]

Hi, I’m really excited about the latest update featuring the integration with Tailwind. Let me start by saying that I was already using Tailwind in projects outside of the WordPress context, so this integration pleased me enormously. Looking at the documentation, I saw that it is possible to copy and paste HTML components made with Tailwind directly into Cwicly by activating HTML to block in the settings, but in my installation the item is not present. I attach photos.

I also wanted to know if to integrate Custom Fonts you need to use the classic Tailwind configuration file, as for projects outside of WordPress, or is there a different method that I missed.
A thousand thanks

[StrangeTech]

Hi @qodesign,

This is a known issue:

TailwindCSS - HTML to Blocks feature

Hi @antonijo01, It is appearing correctly when editing pages, but not when editing templates: Menu when editing a page [Screenshot 2024-01-31 at 19.35.41] @Louis, this is consistent for all templates (single or archive) and whether or not force iframe setting is enabled in the Cwicly Role Manager.

[qodesign]

Thanks, in fact everything works well in the pages and posts.
Is there anything about this for Custom Fonts?

[StrangeTech]

@qodesign

Is there anything about this for Custom Fonts?

What do you want to know about custom fonts?

Are you referring to using them with Tailwind or just within Cwicly?

For the Cwicly side:

For the Tailwind side, you can still use the same Cwicly fonts from the Font Manager, just specify them in the Tailwind config either overriding an existing font or adding a new custom one:

Here are some examples of how to update the config:

How to use custom fonts in Tailwind CSS - LogRocket Blog

[qodesign]

@StrangeTech

For the Tailwind side, you can still use the same Cwicly fonts from the Font Manager, just specify them in the Tailwind config either overriding an existing font or adding a new custom one:

In Tailwind mode the field for the Font Manager does not appear, but you must set the fonts from the typography settings. If I want to import them from Tailwind configuration file, how do I specify the local path, i.e. where cwicly saves the fonts locally?

[Louis]

Hello @qodesign,

As long as your font is active within the Font Manager, you should be able to reference it through the Tailwind config using the font’s name, no paths are necessary.

Cheers,

[qodesign]

Thanks Louis, I’ve been trying since this morning but it doesn’t seem to work. I’ll attach my configuration to you, maybe I’m doing something wrong.

[Louis]

Hello @qodesign,

Oh, you’re right! Just tested on the sandbox and it is not applying…
We’ll have a fix for this in the next update.

For the time being, you could apply it to a global class which will call the font file on the frontend.

Thanks for persisting.

Cheers,

[Araminta]

Hi @qodesign,

Thank you for bringing this to our attention!

This should now be fixed with 1.4.0.1:

@Louis

Fix: Tailwind Fonts → automatically import local fonts that have been specified in the Tailwind configuration

Kindly let me know if this is the case on your end.

Thank you in advance.

[qodesign]

Great, I just updated to version 1.4.0.1 and the problem is solved. You are great guys

[daniel]

Hi do you upload fonts to the global font manager when using tailwind. The Global font manager doesn’t seem to appear for me at all when tailwind is activated.

[StrangeTech]

Hi @daniel,

@daniel

The Global font manager doesn’t seem to appear for me at all when tailwind is activated.

You can simply press the Tailwind mode button in the inspector to toggle the mode off, which allows you to access the Font Manager button.

Alternatively, currently, as of v1.4.0.1, the Globals > Typography tab is unaffected by the Tailwind mode and the Font Manager is always accessible there.

[daniel]

Thanks, I see it now. Much appreciated!

P.s. This tailwind integration is so cool…

[n1xn]

I have the same issue but on 1.4.0.3 I have no option to open the font manager via globals anymore.
Turning the tailwind mode off in the inspector could not solve this neither.
Defining custom fontFamilies via Tailwind configuration does not automatically import the font.

What’s the approach for 1.4.0.3?

[StrangeTech]

Hi @n1xn,

@n1xn

I have the same issue but on 1.4.0.3 I have no option to open the font manager via globals anymore.
Turning the tailwind mode off in the inspector could not solve this neither.

The following still applies perfectly in the latest Cwicly version for us. If you are seeing something different, please post a screenshot.

@StrangeTech

Alternatively, currently, as of v1.4.0.1, the Globals > Typography tab is unaffected by the Tailwind mode and the Font Manager is always accessible there.

[n1xn]

UPDATE: @StrangeTech This scenario only occurs when working in templates. In my case I was working on a header. When switching to a site a can verify that the global font manager is indeed available. Little bit confusing, as I always start a project with the header

@StrangeTech Sure, here you go!

[StrangeTech]

Hi @n1xn,

So I believe I may have isolated what you are experiencing.

@n1xn

This scenario only occurs when working in templates. In my case I was working on a header.

The font manager is available in templates as well as pages. However it is only available in the base breakpoint

If you switch to any other breakpoint, then it is no longer shown.

[n1xn]

WOW - I am impressed, you are completely right!

Thank you

[LauGau]

Thanks @StrangeTech : I confirm : it’s available only on the base breakpoints… Confusing. We really need that “all breakpoint mode”.