css stylesheet is not connecting to pjs

[williamkwon97]

Describe the problem:

Currently, I have an issue to use tailwind css it's not working for me and my code is

 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Austin Pizza Shop</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet"
        href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
    <link rel="stylesheet" href="/css/app.css">

Link to a minimal reproduction:

yarn dev
and most right side of navbar should show a picture with primary background color but it fails.

My repository https://github.com/williamkwon97/pizza-order-webapp

[iantearle]

I’ve looked through your code, no where are you defining a back ground color to a given element. This isn’t an issue with tailwind but your implementation of the classes. Try adding bg-blue-500 to the surrounding div class.

[williamkwon97]

I’ve looked through your code, no where are you defining a back ground color to a given element. This isn’t an issue with tailwind but your implementation of the classes. Try adding bg-blue-500 to the surrounding div class.

Yeah so tailwind is working, so somehow app.scss is not connecting to home.ejs file when I made

nav li:last-child a {
  background: $primary;
  &:hover {
    background: $primary-hover;
  }
}

at app.scss
and I declare primary color at variable.
I put this code to link stylesheet to app.scss from home.ejs but somehow not working (css interchangable with scss)
link rel="stylesheet" href="/css/app.css">
I'm following tutorials from here https://github.com/codersgyan/realtime-pizza-app-node-express-mongo/blob/master/resources/views/layout.ejs