Laravel integration Tailwind 3 or 4 ? Both are loaded in the example...

[ankheur]

Hi Keenthemes team,

I'm sorry but it's getting a bit annoying not to have a proper functional example of an integration with Laravel and having to spend hours trying to debug it myself and hopefully make it work.

Again with the new version there are inconsistencies with the style sheets:
In the app.css and the package.json we install and load Tailwind 3
But in the head.blade.css and in the css assets from the theme (dist/assets/css/style.css) that the integration guide asks us to copy in the laravel public directory, the style.css seems to load... tailwind 4 !

It seems that this style.css is the only which matters because the resources/css/app.css which should load tailwind from the npm package is not applied and can be commented without breaking anything.

The vite.config.js presented in the integration guide is also not the same than in the repo and has a syntax error in the rollupOptions which makes the build break.

The installation instructions are really unclear and the code is unfortunately not working properly with two different ways from the repository and from the integration guide.

[niels-numbers]

Hey,

I agree with ankheur - there are definitely Tailwind issues here. If you run the app as-is, you’ll see this:

That happens because Tailwind CSS isn’t being applied. For Tailwind 3 you need a postcss.config.js in the project root, e.g.:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Once you add this, the design changes to:

I’m not sure if this is the look you intended. If you strip all custom CSS and just keep:

/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

…the design breaks slightly:

That said, upgrading to Tailwind 4 fixes these issues entirely. I will create a MR to fix this.