Remix.js: Issues applying Tailwind classes to Primereact components

MahdiHamediRad commented 1 day ago

Describe the bug

Hi there! I'm working on a project using Remix.js and have installed the Primereact library. I'm aiming to utilize the Tailwind mode within this library. Following the documentation, I've configured my project, but I'm encountering an issue. When I open the project in a browser and inspect it, the Tailwind classes aren't being applied to the Primereact components! However, when I make a minor change to the project (like adding some text), triggering a Hot Module Replacement (HMR) update, the Tailwind classes are loaded! In other words, the Tailwind classes aren't being added to the Primereact components on the server side.

Here are snippets from my relevant configuration files:

root.tsx:

import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
import { createContext } from 'react';
import { PrimeReactProvider } from 'primereact/api';
import Tailwind from 'primereact/passthrough/tailwind';
import './../assets/styles/tailwind.css';

export const AppContext = createContext<unknown>({});

export function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en" dir="ltr">
            <head>
                <meta charSet="utf-8" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1"
                />
                <Meta />
                <Links />
            </head>
            <body>
                {children}
                <ScrollRestoration />
                <Scripts />
            </body>
        </html>
    );
}

export default function App() {
    return (
        <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
            <AppContext.Provider value={{}}>
                <Outlet />
            </AppContext.Provider>
        </PrimeReactProvider>
    );
}

tailwind.config.ts:

import type { Config } from "tailwindcss";
// import colors from 'tailwindcss/colors';

export default {
    content: [
        './app/**/*.{js,ts,jsx,tsx}',
        './lib/**/*.{js,ts,jsx,tsx}',
        './node_modules/primereact/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        container: {
            center: true,
        }
    },
} satisfies Config;

tailwind.css:

@layer tailwind-base, primereact, tailwind-utilities;

@import 'primereact/resources/themes/saga-blue/theme.css' layer(primereact);

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

vite.config.ts:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import checker from 'vite-plugin-checker';

export default defineConfig({
    plugins: [
        remix({
            future: {
                v3_fetcherPersist: true,
                v3_relativeSplatPath: true,
                v3_throwAbortReason: true,
            },
            routes(defineRoutes) {
                return defineRoutes(route => {
                    route('/', 'routes/_index.tsx', { index: true });
                });
            },
        }),
        tsconfigPaths(),
        checker({
            typescript: true
        }),
    ],
});

I'd appreciate any guidance on resolving this. Thank you.

Reproducer

No response

System Information

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 736.59 MB / 7.33 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    primereact: ^10.8.3 => 10.8.3
    react: ^18.2.0 => 18.3.1
    tailwindcss: ^3.4.4 => 3.4.10

Steps to reproduce the behavior

No response

Expected behavior

No response

melloware commented 1 day ago

Others have had issues too. Remix is quite messy.

melloware commented 1 day ago

In fact see these on Remix: https://github.com/remix-run/remix/issues?q=is%3Aissue+primereact+is%3Aclosed

MahdiHamediRad commented 4 hours ago

In fact see these on Remix: https://github.com/remix-run/remix/issues?q=is%3Aissue+primereact+is%3Aclosed

Thank you for your guidance. I checked these but it didn't work.

melloware commented 4 minutes ago

Yeah Remix is funky i don't think anyone has gotten PrimeReact to really work successfully with it.

primefaces / primereact