Why my app.css does not want to show the result?-CodePudding

I have an HTML page (chat.blade.php) and a CSS file (app.css), and for some reason, my CSS code does not change the page after the PHP run dev command, maybe I did not write the path correctly in the HTML file, please tell me because the first once I work with CSS. app.css (in resources folder)

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Bicyclette', sans-serif;
}

body {
    background-color: #EEE;
}

input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}

input {
    display: block;
    width: 100%;
    background-color: #FFF;
    padding: 12px 16px;

    font-size: 18px;
    color: #888;
}

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    display: flex;
    padding-top: 128px;
    padding-bottom: 32px;
    background-color: #8C38FF;
    background-image: linear-gradient(to bottom, #8C38FF, #6317ce);
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    box-shadow: 0px 6px 12px rgba(0, 0 ,0 , 0.15);
    padding-left: 16px;
    padding-right: 16px;
}

h1 {
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 16px;
}

#username {
    border-radius: 8px;
    transition: 0.4s;
    text-align: center;
}

#username:focus {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
}

#messages {
    flex: 1 1 0%;
    overflow: scroll;
    padding: 16px;
}

.message {
    display: block;
    width: 100%;
    border-radius: 99px;
    background-color: #FFF;
    padding: 8px 16px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
    font-weight: 400;
    margin-bottom: 16px;
}

.message strong {
    color: #8C38FF;
    font-weight: 600;
}

#message_form {
    display: flex;
}

#message_input {
    flex: 1 1 0%;
}

#message_send {
    appearance: none;
    background-color: #8C38FF;
    padding: 4px 8px;
    color: #FFF;
    text-transform: uppercase;
}

and my chat.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Чат</title>

    <link rel="stylesheet" href="./css/app.css">
</head>
<body>
    <div class="app">
        <header>
        <h1>Чат</h1>
            <input type="text" name="username" id="username" placeholder="Вкажіть ваше ім'я">
        </header>

        <div id="messages"></div>

        <form id="message_form">
            <input type="text" name="message" id="message_input" placeholder="Написати повідомлення...">
            <button type="submit" id="message_send">Отправить сообщение</button>
        </form>
    </div>

<script src="./js/app.js"></script>
</body>
</html>

CodePudding user response：

Suggestion: Open the page in a browser and CTRL U to view page source. Click on the css file and make sure it's being loaded correctly. You might be pointing it on the wrong directory.

CodePudding user response：

You should update your CSS path file to ../../public/css/app.css

../: means go to previous folder from the current position (here is chat.blade.php)