#Shady stuff with my app...

39 messages · Page 1 of 1 (latest)

silver seal
#

Hello there! Today I wanted to continue developing my app when suddenly I noticed that everything looked different. I haven't done anything since the last time it worked. I do not really know what is going on so is anyone willing to help? Ill post some screenshots.
First one (one with the color) Is how it looked yesterday when I made a screenshot to show a friend.

Second one (dark one) is how it looks now.

image0.png image.png
bold bridge
#

Well you styles probably aren't loading or aren't generated properly. Make sure you've built your assets or are running the devserver. So you'd have to look into that, use your browser's devtools to see if things are erroring etc. Inspect the elements to see if styles are applied properly. We can't help you much besides that

honest pasture
#

If you are in local at a moment, You just need to run npm run dev It will compile your assets and give you css. Also make sure you have generated manifest.json which keep track of css/js paths.

If manifest.json not created, then run npm run build ( One time command ).
Once manifest is ready you can have to run npm run dev each time you start your project.

If you are in on your dev server at a moment,
You just need to run npm run dev, each time you take pull on server. By this command you assets will be refreshed with latest tailwind classes that you have used in blade files.

Happy coding...

silver seal
proven yew
silver seal
proven yew
#

"now" is the moment you run the build

#

Depending on which environment you are, you could run into 404s for content, that get's loaded through https. In that case, try if adding \URL::forceScheme('https'); to your boot() method of AppServiceProvider just to try

bold bridge
silver seal
#

I inspected my CSS with devtools and I noticed that certain stuff was there, like m-2, border-2, w-full but other stuff wasn't there, things like any color, w-[any number width], anything with text-[whatever]

#

So Tailwind is not creating my css correctly..

proven yew
#

Are you seeing any errors in network tab when you load the page?

#

any errors when running dev or build?

silver seal
proven yew
#

are you loading the correct files in the header?

bold bridge
silver seal
# 
content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
#

According to Tailwind docs it should be enough

proven yew
#

enough if you are not placing your files else where 😉

silver seal
# 
@extends('layout')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D-Printify</title>
    
</head>


<body>
    @section('content')
    <h1 class="text-orange-500" >About us</h1>
    @endsection
</body>
</html>

So I made this quick little testing page to see if it would work, but no. And I also noticed that the auto complete and InteliSense wasn't working to

bold bridge
#

You're not loading any CSS there. Also, extending a layout, so you'll get a HTML element within a HTML element? That would probably also contribute to things not working.

silver seal
bold bridge
#

A single HTML tag, according to the HTML specs.

silver seal
# 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D-Printify</title>
    <link rel="stylesheet" href="{{ asset('app.css')}}">
    @vite('resources/css/app.css')
</head>

I am loading the CSS in the layout here

bold bridge
#

Yeah, so you're defining a HTML tag within the body, with another head and body inside that body, that's not how you should write HTML

silver seal
# 
@extends('layout')

    @section('content')
    <h1 class="text-orange-500" >About us</h1>
    @endsection

So this would be better

bold bridge
#

Yeah, also remove the <link rel="stylesheet" href="{{ asset('app.css')}}">, you're already including that, so now you're including it twice (and incorrectly) so that might contribute to the issues as well

bold bridge
#

@silver seal You solved the issue and the thread can be closed?

silver seal
#

But it was eating time

proven yew
#

Check the plain source code of your final app, if you find the according css files. If they are not there, you are still having issues in your HTML structure.

proven yew
# 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D-Printify</title>
    @vite('resources/css/app.css')
</head>
<body>
    Hello World!
</body>
</html>

should be a good starting point to get at least your styles loading

#

... after running npm run dev or npm run build

barren merlin
#

This is the best clickbait title I've seen here 😆

silver seal
#

Or redo the whole thing but better