Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Mar 3, 2025

22

OP

Level 1

Laravel 12 flux css not included right after clean install

To celebrate the release of Laravel 12, I just performed a clean installation using Laravel Herd.

After the installation was complete, the main page rendered correctly when accessing the local URL. However, the login and register pages did not render properly.

Upon investigating the issue, I found that when running npm run build, it seems that Flux CSS is not included in the build, but I am unsure why. I haven't modified any files after the clean installation.

Comparing the CSS file generated after running npm run build on my laptop (where Laravel Herd was also used for installation), I noticed a difference in file size. On the problematic local environment, the generated CSS file is only 9KB, whereas on my laptop, the built CSS file is 113KB.

Please help!

Level 16

On a fresh install using Herd, Laravel 12 and the Livewire starting kit, everything is working perfectly fine after installing and building the production assets.

Did you reply "yes" upon installation when asked:

Would you like to run npm install and npm run build?

This part not only builds assets, but install all the packages first (npm install). If you said "no", then obviously you have to run it manually before building your assets.

You can also try to update you Laravel Installer and Herd, and try to create a brand new project to see if this makes any difference:

composer global update laravel/installer

For Herd, check for updates in the application.

OP

Level 1

Yes, Laravel Herd is the latest version (1.16.0) that I just installed, and the Laravel installer is also version 5.12.0.

When creating a new Laravel project through Laravel Herd in a Windows environment, there was no prompt asking, "Would you like to run npm install and npm run build?" However, the creation log does show that the npm install && npm run build commands were executed. So, I don't think this is the issue.

Just in case, I manually ran npm install && npm run build in the project root, but the problem was not resolved.

Level 16

@sctaix Ok, I have the same version as yours. Maybe the issue is specific to Windows, or your environment, but since you are using Herd, it should be pretty much the same no matter the OS.

Did you try to run it in dev mode (npm run dev) , and if so, was it working properly?

OP

Level 1

When running npm run dev in the terminal, the following logs appear, and everything works correctly:

> dev
> vite

 VITE v6.2.0  ready in 590 ms

➜  Local:  {localhostURL}
➜  Network: use --host to expose
➜  press h + enter to show help

LARAVEL v12.0.1  plugin v1.2.0

➜  APP_URL: {APP URL}

After a clean installation, when running npm run build, the generated CSS file size is only 9KB, which suggests that some CSS files are missing during the build process, as I mentioned earlier.

Even when creating a new Laravel project (clean installation) with a different name in Herd, the issue persists.

Interestingly, everything works fine on my other laptop.

Level 16

It’s odd that everything renders correctly with npm run dev but fails after running npm run build.

The first things that come to mind are a Node version mismatch or a caching issue.

Check the Node version on the "faulty machine" and compare it with your laptop. If there's a difference, try updating it. For reference, I'm using v22.11.
Run php artisan optimize:clear.
Perform a hard refresh in your browser (Ctrl + Shift + R or Cmd + Shift + R).

If the issue persists, you might want to compare other factors between your machines, such as the Herd version and its configuration, firewall settings, or VPN. However, these are less likely to be the cause in this case.

OP

Level 1

On the local environment where the issue occurs, Node.js is version v22.12.0, and npm is 10.9.0.

On the laptop where there is no issue, Node.js is v18.

Since the latest Node.js version at this time is v22.14.0, I updated to that version and created a new Laravel project in Herd for testing. However, the issue was still not resolved.

Next, I downgraded Node.js to v18 and tried again, but the problem persisted.

It seems necessary to investigate why some CSS files are missing during the npm run build process.

OP

Level 1

when I say that the CSS is not rendering properly, I mean it appears as shown in the attached image URL. (I just signed up for Laracasts today, so I'm unable to insert links yet. Sorry about that!)

i.imgur.com/PUFECUB.png

Level 16

Can you try this after successfully installed a fresh project:

php artisan optimize:clear  
php artisan config:clear  
php artisan view:clear  
php artisan route:clear
rm -rf node_modules .vite public/build
npm install
npm run build

And check again?

OP

Level 1

php artisan optimize:clear  

   INFO  Clearing cached bootstrap files.  

  cache ............................................................................................................................... 34.41ms DONE
  compiled ............................................................................................................................. 3.09ms DONE
  config ............................................................................................................................... 0.84ms DONE
  events ............................................................................................................................... 1.08ms DONE
  routes ............................................................................................................................... 0.83ms DONE
  views ............................................................................................................................... 10.77ms DONE

php artisan config:clear  

   INFO  Configuration cache cleared successfully.

php artisan view:clear

   INFO  Compiled views cleared successfully.

php artisan route:clear

   INFO  Route cache cleared successfully.

Remove-Item -Recurse -Force node_modules, .vite, public/build

npm install

added 83 packages, and audited 84 packages in 5s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm run build

> build
> vite build

vite v6.2.0 building for production...
✓ 2 modules transformed.
Generated an empty chunk: "app".
Generated an empty chunk: "app".
Generated an empty chunk: "app".
Generated an empty chunk: "app".
Generated an empty chunk: "app".
public/build/manifest.json            0.27 kB │ gzip: 0.15 kB
public/build/assets/app-Cjp7B0oZ.css  9.98 kB │ gzip: 2.52 kB
public/build/assets/app-l0sNRNKZ.js   0.00 kB │ gzip: 0.02 kB
✓ built in 207ms

I checked after running all the commands, but I was still unlucky.

It seems that the file size of public/build/assets/app-Cjp7B0oZ.css is 9.98 kB, but it should be 13 kB for a normal CSS file.

Level 16

@sctaix I think this discussion could help you as it seems to be the same type of issue that you are facing.

1 like

OP

Level 1

Thank you for finding a thread with a similar issue on my behalf. It looks like the issue was resolved in that thread, but I’ll ask just to be sure! I really appreciate your deep interest in my problem!

Level 3

Hi @sctaix, not sure if it'll help but I'm also on windows and ran into some issues also, I managed to resolve most by adding the @livewireScripts under the @fluxScripts and everything then started rendering - I checked the other thread and didn't see a solution so hope this helps you.

Level 3

after adding the scripts tag and a watch flag "watch": "vite build --watch" in the package.json, I ran the build again to compile all the assets.

Level 5

@MPGsKrieg Can you explain this a little more?

OP

Level 1

I added the @livewireScripts code right after @fluxScripts, but the issue still hasn't been resolved. Based on previous comments, it seems that the Flux-related CSS is missing when running npm run build, resulting in an app.css file that is only 9KB in size. A properly generated app.css file should be around 113KB on a clean installation.

Level 3

@brianhorlings for some reason the @fluxScripts wasn't including the livewire scripts for me so when I ran the npm run build my assets weren't being compiled and the page wasn't rendering correctly - I added @livewireScripts above the closing body tag of my main layout page and then stopped npm server and did another npm run build then npm run dev --watch , my assets then were compiled and items rendered on the page in my site.test browser. only other "suggestion" is to make sure you have done a composer update to get latest flux/livewire sorry if this doesn't help @sctaix

Level 1

maybe because of missing postcss.config.js file
export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

Best Answer

Level 5

I could finally fix this today by simply creating a .git directory in the project root. This issue put me on the right track: https://github.com/tailwindlabs/tailwindcss/issues/17080

1 like

Level 4

Hi! I had the same issue.

OSX 15.3
PHP 8.3
Node 22.11

I did:

composer global update laravel/installer
laravel new project

Selected:

Livewire as started kit,
Laravel's built-in authentication,
Laravel Volt enabled,
Pest as preferred testing framework.
Run npm install && npm run build: Yes

Checked and I didn't have public/livewire nor public/flux directories.

I went to my local URL and livewire/livewire.js and flux/flux.js were missing.

Then I executed php artisan vendor:publish --tag=livewire:assets

Which copied [vendor/livewire/livewire/dist] to `[public/vendor/livewire]``

I went to my local URL and livewire/livewire.js was loaded from vendor but flux/flux.js was still missing.

I checked and I found php artisan flux:activate... which asks for a paid license...

So... my question is... is it possible to use the "out-of-the-box" Laravel installation with Livewire started kit without a Flux license?

Level 4

Quick update, that worked for me. Leaving what did here in case someone has the same scenario (I use nginx):

Both things were in Flux's docs:

2. Install Flux Pro (optional) If you have purchased a Flux Pro license, you can install it using the following command: php artisan flux:activate

That command is only if we use Flux PRO 👍 (not my case).

Configuring nginx

location ~ ^/flux/flux(\.min)?\.(js|css)$ {
    expires off;
    try_files $uri $uri/ /index.php?$query_string;
}

✅ Now both JavaScripts are loaded.

Level 122

@eco14780 is this because your web server is not pointing to the public folder, and instead is pointing to the root of your project?

Level 4

@Snapey nginx root was pointed to public directory and everything was ok. The only thing was flux/flux.js. Adding what Flux's doc mention to nginx made the trick. Now it loads.

Please or to participate in this conversation.