Frontity and Tailwind components - possible solutions

At the beginning I would like to mention that I have read the valuable thread on the Frontity forum Tailwindcss with babel-macro-plugin and CSS-in-JS about Tailwind CSS and Frontity. This topic is about Tailwind CSS and CSS-in-JS used in Frontity. This makes it possible to use Tailwind CSS in Frontity.

However, if you want to use ready-made Tailwind components, it requires converting the ready-made component code (e.g. prepared in React) to styled components (e.g. ready-made components from Tailwind UI - Official Tailwind CSS Components or https://flowbite.com/#components). If the components are extensive, a lot of work requires rewriting them into styled components.

Due to the above problem, I tried to use Tailwind CSS installed as PostCSS to use entire ready-made components for Tailwind CSS with simple className attribute in JSX.

I know the topic may should go to Tailwind CSS support. So, I will to that. However, I want to know the solutions from two sides, i.e. using Tailwind CSS in PostCSS mode with Webpack used by the frontity package (from Tailwind CSS view) and using Tailwind CSS by frontity as an external CSS library (from frontity view).

However, using Tailwind CSS in PostCSS mode does not work. I configured TailwindCSS by instructions from Tailwind CSS website: Installation: Using PostCSS - Tailwind CSS.
On the Frontity project side, I have the following configuration (in the src/components/index.js file):

import tailwindCss from "../index.css";
...
<Global styles = {css (tailwindCss)} />

Please help if there may be a bug in this configuration that prevents the Tailwind CSS frontity from loading.

1 Like