Need help installing Preline UI with Tailwind CSS 4

[dbc2201]

Since the tailwind.config.js file is now removed from the Tailwind CSS 4 project structure, I was wondering if there was a way to include the preline/plugin from require(preline/plugin) into maybe vite.config.ts if it is possible or any other work around so that the Preline UI could be used. Any help is appreciated.

[wongjn]

You'd use the @plugin directive.

[wongjn]

In your main CSS file:

@import "tailwindcss";

@plugin "preline/plugin";

@source "node_modules/preline/dist/*.js";

[dbc2201]

It shows an error like this

[plugin:@tailwindcss/vite:generate:serve] n.includes is not a function
/Users/dbc2201/WebstormProjects/react-movie-app/src/index.css

[wongjn]

I think that would mean that Preline is not compatible with v4.

[dbc2201]

Oh I see, then I would need to wait till the devs fix it. Thanks anyways! 👍🏻

[porobertdev]

It shows an error like this

[plugin:@tailwindcss/vite:generate:serve] n.includes is not a function
/Users/dbc2201/WebstormProjects/react-movie-app/src/index.css

Someone found a solution: htmlstreamofficial/preline#518 (comment)

Plugin changes: BALOTIAS/preline-tw-v4@b121e15#diff-b72c2a6d80daeb87d4852346d0f86bdb7c15f767737a0e1336a7070d9e31d271

I can confirm it works - tested with Astro 5.3