Implementing tailwindcss

[QastanFIT]

It would be nice to be able to add tailwind styling to it.

[stivenm16]

I'd like to add that some tailwind classes work but strangely someother ones don't. I minimal sample of that is this component:

<button class={text-sm font-bold text-white flex items-center bg-yellow-400 hover:bg-yellow-700 py-2 px-4 rounded transition duration-300 ease-in-out} > Press me

normally it should display a yellow tone in the background but this specific color only works with bg-yellow-500, some other classes are the same not recognized by the editor but some other ones work.

[hellorashid]

Having this issue too!
I noticed that it only applies the tailwind classes that are already being used before.
So if you apply bg-yellow-400 somewhere else in the page, then it will work - but if you change it to bg-yellow-500, and haven't used that anywhere else, it won't work.

still looking for a fix! Have been trying tailwind JIT mode, but haven't gotten anything to work yet.

[carbonrobot]

React live will support any css classes you pass to the component, but Tailwind is not built-in to the component itself so your host site must supply the Tailwind framework.

<h3 className="text-xl text-center font-blue">
  Hello World!
</h3>

If you are just trying random TW classes on the documentation page, that will not work since we precompile only the TW classes we specifically use on the site in order to reduce the HTML payload.

[HamedMP]

I have the same issue.

My project has tailwind, not sure how to include all possible standard classes in the precompile so i can use any of them with live rendering, any suggestions?

[stivenm16]

I have the same issue.

My project has tailwind, not sure how to include all possible standard classes in the precompile so i can use any of them with live rendering, any suggestions?

I'd suggest you to find a workaround mixing tools like clsx and tailwind-merge, I hope it works for you! here there's an idea of how you could implement it by yourself :) https://medium.com/@naglaafouz4/enhancing-component-reusability-in-tailwind-css-with-clsx-and-tailwind-merge-986aa4e1fe76

[Ogma-Dagda]

React live will support any css classes you pass to the component, but Tailwind is not built-in to the component itself so your host site must supply the Tailwind framework.

<h3 className="text-xl text-center font-blue">
  Hello World!
</h3>

If you are just trying random TW classes on the documentation page, that will not work since we precompile only the TW classes we specifically use on the site in order to reduce the HTML payload.

Do you think adding safelists in the Tailwind configuration to preserve the essential TW classes could be a viable solution? I understand this might significantly increase the CSS file size, but it would ensure that the classes aren't purged.

For instance:

  safelist: [
    {
      pattern: /bg-.*-[0-9]{3}/, 
      variants: ['sm', 'md', 'lg', 'xl', 'xxl'],
    },

Or do you see a better solution?

[HamedMP]

This worked for me, but the build time increases exponentially FYI

module.exports = {
  safelist: [
    {
      pattern: /./,
    },
  ],
}

Alternatively, you can choose a subset:

module.exports = {
  safelist: [
    {
      pattern: /^(bg|text|border|p|m|w|h)-.+/,
    },
  ],
}