After installation and running npm setup commands, CSS is gone from the site

[HirtLocker128]

Platform

MacOS

Browser

Google Chrome

Browser Version

111.0.5563.64

Describe the bug

After a brand new installation of Cloud using "statamic new mysite lucky-media/cloud" the site is set up and loads fine. However when I follow the instructions to compile assets by running "npm install" and "npm run dev", the page then loads with no CSS applied. 

I would like to change the fonts which seems to require recompiling the Tailwind config file, but when I try to do this with npm run dev (even without making any changes) it removes all CSS from the page.

Repo Steps

1. Install a new instance of Cloud
2. Run "npm install"
3. Run "npm run dev"
4. Load site

Expected Behavior

Expect Tailwind to recompile and for CSS to load fine

Anything else?

[HirtLocker128]

[lokmanm]

@HirtLocker128 hey sorry a bit for the late response. What are you using to run the site on your local machine?

[HirtLocker128]

@lokmanm All good! I'm using Docker and Laravel Sail, just the default configuration as described in the Statamic docs

[lokmanm]

@HirtLocker128 do you have your APP_URL setup correctly ?

[HirtLocker128]

@lokmanm yes, I have it set in .env to APP_URL=localhost which is how I am accessing the site

[lokmanm]

@HirtLocker128 have you removed these files:

Please remove the unnecessary files after installing webpack.mix.js, cp.css, and site.css as they are unnecessary.

[HirtLocker128]

Yes I have done that

[lokmanm]

@HirtLocker128 can you run: php please support:details and send it over please?

[HirtLocker128]

Here you go:

Environment
Application Name: Statamic
Laravel Version: 9.52.4
PHP Version: 8.1.16
Composer Version: 2.5.4
Environment: local
Debug Mode: ENABLED
URL: localhost:80
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 1
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 3.4.5 Solo

Statamic Addons
cnj/seotamic: 2.1.0

[lokmanm]

@HirtLocker128 I just noticed we forgot to export the postcss file in our starter kit.

Can you try the following:

1. Create a postcss.config.js file in the root directory.
2. Paste the following code:

   module.exports = {
   plugins: {
       tailwindcss: {},
       autoprefixer: {},
   },
   };

This should fix the issue. We will release an updated version tomorrow.

Sorry for the inconvenience.

[HirtLocker128]

@lokmanm That did it! Thank you so much for the excellent support!