Tailwind is not loaded in Jetstream Livewire App

Question

I have a fresh Laravel Jetstream Livewire application, here are the steps I followed to make it so that its hosted on a VPS managed by Plesk<(Please remember its not hosted locally, its hosted on a VPS):

1. cd into an empty subdomain folder and then:

   composer create-project laravel/laravel .

2. Set up a new DB and connect it in the .env

3. php artisan migrate

4. composer require laravel/jetstream

5. php artisan jetstream:install livewire --dark

6. npm install

7. npm run build

8. php artisan migrate

This has created an app successfully. Note that I still have not edited or added any new files, everything is as is. I can log in, logout, and do the stuff without a problem. I would like to use the welcome.blade.php as my starting point. However, the Tailwind styles are inline, a major part of TailwindCSS has been minimized into a 1-liner, lol. So it looks like this <style>12kCSS Characters</style> If I remove this block then there is no CSS applied at all, it's like Tailwind is not even installed. I checked my project structure and here is my tailwind.config.js:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],
};

I use npm run build to build my assets and when I run npm run dev I get this:

This is what I get when I use npm run build:

When I use npm run dev, I am not able to type afterwards in the console, its running, but with build its just being built.

So, I use npm run build to build my app. These are the only commands that I have(npm run dev & build), I have used these and nothing has changed. My project structure is like: /resources/views/welcome.blade.php I also have this /resources/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
[x-cloak] {
    display: none;
}

This is my vite.config.js:

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

I have done thousands of npm run builds and npm installs, but nothing. I have followed the Tailwind instructions to install it, but nothing, the thing just cannot be loaded. I did all of the checks:

• The main file resources/css/app.css already existed
• <link rel="stylesheet" href="{{ mix('css/app.css') }}"> brings up a 404 in the Network tab of the dev console in Chrome when included in the code
• tailwind.config.js exists and is configured properly.

I have yet to find any simple documentation to instruct me how I can do this properly and I do not understand what I missed, I followed all the instructions and double-checked everything. The website is working without a problem other than loading TailWind and Im frustratingly out of ideas as to how I can solve this issue. In my /public/ folder I have this:

• /public/build/assets/app-476eb4f6.js
• /public/build/assets/app-993c10f5.css

Answer 1

So a couple of things. If you are using Laravel 10, the default compiler is now Vite, and not Mix. So that will mean that in your layout, you'll have a line for something like this below, rather than the traditional <link rel="stylesheet" href="{{ mix('css/app.css') }}">.

@vite(['resources/css/app.css', 'resources/js/app.js'])

So this is where your styling is coming from, which means you will not need <link rel="stylesheet" href="{{ mix('css/app.css') }}"> at all.

Secondly, you mention that running npm run dev won't stop in the terminal - and that is expected, as with Vite, the npm run dev command is kind of like npm run watch from the old days when using Mix. In addition to this change, Vite has some other goodies baked into it as well, but that's why you'll see it running forever - it's ment to do that. I suggest reading here from the Laravel docs: https://laravel.com/docs/10.x/vite#vite-or-mix

Finally though - the issue with not seeing any styles is because you haven't compiled them yet. If you run npm run build, you'll build all your assets, and this is what you'll do when you're done - before deploying into production. While developing locally, you can use npm run dev (the forever running process) to make it rebuild the CSS whenever you change a file (Tailwind only compiles the CSS classes you actually use, so rebuilding it is needed when you add new classes that you haven't used before).