Is possible to use tailwindcss in a vtex.io react app project?

Is possible to use tailwindcss in a vtex.io react app project?, the only way that i can make tailwind work is with cdn, is there another way to do it?

Hello @JuanEliasJabib,

It is possible to embed the Tailwind CDN via the vtex.render-runtime helmet.
Follow the link for more details about its implementation:

In my opinion, the best way to achieve this in VTEX IO wouldn’t be through Helmet. Here are a few reasons:

  • You would need to import your component on every page within the JSON, either in some HTML or block that exists on all pages.

The most suitable approach, in my view, would be to create a Pixel app. Once installed, it would be ready to use.

Regarding modifications to Tailwind, this could be done through the head.html file itself. Alternatively, if you prefer, parsing the settingsSchema configuration file in the manifest.json file could be another solution.

Remember that VTEX IO already includes Tachyons, which, despite being somewhat outdated, integrates well with VTEX and might resolve your issues with some utility CSS.

I’ve provided an example of how such an app would look. If you’re interested, we could work on something more elaborate in the future.

Link to the example app

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.