Web server doesnt output the website like in the project on localhost

48 views Asked by At

The website is a simple Laravel-based application featuring login, signup, dashboard functionalities, etc. It utilizes Laravel, Tailwind, and Bootcamp. While the website appears visually appealing on localhost, the design disappears and everything turns white the moment I push it to the repository, which subsequently uploads it to the web server.

P.S. I attempted to resolve the issue by including app.css (which imports Tailwind) in the blade.php page, but to no avail.

enter image description here

App.css

@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Form.blade.php

<x-app-layout style="background-color: #373737; color: #373737;">
    <!-- Line below aint working -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">

    <x-slot name="header">
    </x-slot>

    <div class="overflow-hidden">
        <form action="{{ route('submit_create_user_domain') }}" method="post" class="mt-6 px-6 py-8 rounded-lg shadow-lg bg-neutral-800 ">
            @csrf
            <div class="mb-6">
                <label for="url" class="block mb-2 text-sm font-semibold text-white">{{ __('URL') }}</label>
                <input type="text" id="url" name="url" class="w-full p-3 bg-grey-700 border border-gray-600 text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-900 dark:border-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 transition duration-300 ease-in-out" placeholder="https://yourwebsite.url" required>
            </div>
            <button type="submit" class="px-6 py-3 text-sm text-center font-semibold text-white bg-neutral-600 hover:bg-neutral-700 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg shadow-md transition duration-300 ease-in-out">
                {{ __('Save') }}
            </button>
        </form>
    </div>
</x-app-layout>

The output on the localhost is grey - background grey, buttons slightly black, white text.

0

There are 0 answers