vite with laravel compiles dev css incorrectly

Question

I have built a layout using the tailwindcss node package on my local PC (no Laravel or Vite, just running npx tailwindcss -i etc/file.css -o public/file.css and the compiler built the CSs correctly. I then created a new Laravel application, configured tailwind.config.js, vite.config.js and postcss.config.js files respectively. However, when I run npm run dev and take a look in the browser the page does not look correct. The black button on the left hand side of the screen is supposed to trigger a drop down menu. This works on the standalone tailwind project, but when I merge it with my Laravel project, it doesn't work. In addition, the page doesn't look right

This is what the page is supposed to look like:

And this is how it looks in Laravel:

As you can see the CSS isn't compiling correctly.

Here is my vite.config.js file:

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

export default defineConfig({
    server: {
            host: 'begging.test',
            https: false,
            hmr: {
                host: 'begging.test',
            },
    },
    plugins: [
        laravel([
            'resources/css/app.css'
        ]),
    ],
});

Here is tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: {
        "./resources/**/*.blade.php",
        "./resources/**/*.css",

    },

    theme: {
        extend: {
            colors: {
                primary: '#3b3737',
                secondary: {
                    100: '#E2E2D5',
                    200: '#888883'
                }
            },
            fontFamily: {
                body: ['Inter']
            }
        }
    },
    plugins: {
        'postcss-import': {},

    },

}

Here is the postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

This is the app.css file:

@import "./custom.css";
@import "./normalize.css";
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


.btn{
    @apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer;
}

This is the custom.css file:

@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@600&display=swap');
header {
    background: linear-gradient(to right, #dce4ec, #77a7af);
    height: 100px;
}
nav {
    display: flex;
    justify-content: center;
}

.content a {
    color: blue;
    text-decoration: none;
}

.content a:hover {
    color: red;
    text-decoration: underline;

}

.nav-links {
    display: inline-block;
    list-style: none;

}

.nav-item {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;


}

.nav-link {
    text-decoration: none;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .5);
}

.logo {
    color: #575353;
    font-family: 'Edu NSW ACT Foundation', cursive;
    margin: 0 0;

}

.container {
    max-width: 1200px;
    margin: 0 0;
}

.welcome {
    position: absolute;
    left: 700px;
}

.content {
    display: none;
}

and finally this is the app.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Send Tom to University</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    @vite('resources/css/app.css')

    <script type="text/javascript">
        $(document).ready(function() {
            $(".welcome").animate({left: "375px"}, 1000);
            $(".content").fadeIn(2000);
        });
    </script>
</head>
<body>
<header>
    <div class="container">
        <span class="logo text-2xl">Send Tom to Athabasca</span>
    </div>
    <nav>
        <ul class="nav-links">
            <li class="nav-item"><a class="nav-link hover:underline" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link hover:underline" href="#">About me</a></li>
            <li class="nav-item"><a class="nav-link hover:underline" href="#">Projects</a></li>
            <li class="nav-item"><a class="nav-link hover:underline" href="#">Donate</a></li>

        </ul>
    </nav>
    </div>
</header>

<main>
    <div class="grid grid-cols-5">
        <div class="col-span-1 border-solid border-black border-r-2">




            <div class="ml-8 items-center justify-center my-4">
                <h2 class="text-2xl">Ways I make money</h2>


                <div class="mt-4 ml-8">
                    <div class="relative w-[122px] overflow-hidden">

                        <div class="btn bg-primary text-white border-primary border-2 hover:bg-white hover:text-primary">Cryptocurrency
                        </div>
                        <input type="checkbox" class="peer absolute top-0 inset-x-0 w-full h-10 opacity-0 z-10 cursor-pointer" />



                        <div class="overflow-hidden transition-all duration-500 ml-4 max-h-0 peer-checked:max-h-40">
                            <div class="bg-gray-200 rounded">
                                <span class="flex items-center justify-center">testing</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-span-4">
            <h1 class="text-4xl welcome">
                @if(isset($page_title))
                    {{$page_title}}
                @else
                    Support Tom Morison
                @endif

                    </h1>
            <div class="m-20 bg-[#eeeeee] shadow-xl font-body hover:shadow-inner font-body content">
                @yield('content')
            </div>


        </div>
    </div>
    </div>
</main>

</body>
</html>

I find it odd that the layout works when I just use tailwind, however when I migrate to Laravel there are tons of mistakes. Thanks in advance.

EDIT:

I forgot to mention this is what I get when I run npm run dev. The Vite server runs for a few minutes before crashing.

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

VITE v4.2.0 ready in 3174 ms

➜ Local: http://begging.test:5173/ ➜ Network: http://10.0.2.15:5173/ ➜ Network: http://192.168.56.56:5173/ ➜ press h to show help

LARAVEL v10.4.1 plugin v0.7.4

➜ APP_URL: http://begging.test node:internal/errors:490 ErrorCaptureStackTrace(err); ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/vagrant/code/begging/vendor/voku/portable-ascii/src/voku/helper/data/x0cd.php' at FSWatcher. (node:internal/fs/watchers:247:19) at Object.watch (node:fs:2315:34) at createFsWatchInstance (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50313:17) at setFsWatchListener (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50360:15) at NodeFsHandler._watchWithNodeFs (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50515:14) at NodeFsHandler._handleFile (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50579:23) at NodeFsHandler._addToNodeFs (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50821:21) Emitted 'error' event on FSWatcher instance at: at FSWatcher._handleError (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:52013:10) at NodeFsHandler._addToNodeFs (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50829:18) { errno: -28, syscall: 'watch', code: 'ENOSPC', path: '/home/vagrant/code/begging/vendor/voku/portable-ascii/src/voku/helper/data/x0cd.php', filename: '/home/vagrant/code/begging/vendor/voku/portable-ascii/src/voku/helper/data/x0cd.php' }

If you check the network tab, do you see the .css file being downloaded? if you open that file, does it look correct (at least for the .btn class)? What happens if you run npm run build, does it load correctly? Are you using Docker? — matiaslauriti
– matiaslauriti, Commented Mar 20, 2023 at 4:24
Yes, the CSS file is being downloaded. I did open that file and the .btn class appears correct. I did run npm run build once before and I got the same result. And no I am not using docker. I did edit my question and posted what I get in the terminal when I run npm run dev — Tom Morison
– Tom Morison, Commented Mar 20, 2023 at 14:29

Tom Morison · Accepted Answer · 2023-03-20 18:04:21Z

0

I figured it out

my tailwind.config.js file should look like this:

    /** @type {import('tailwindcss').Config} */
module.exports = {
    content: [

        "./resources/**/*.blade.php",
        "./resources/**/*.css"

    ],

    theme: {
        extend: {
            colors: {
                primary: '#3b3737',
                secondary: {
                    100: '#E2E2D5',
                    200: '#888883'
                }
            },
            fontFamily: {
                body: ['Inter']
            }
        }
    },
    plugins: ["tailwindcss ,autoprefixer"]

}

answered Mar 20, 2023 at 18:04

Tom Morison

5923 gold badges9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vite with laravel compiles dev css incorrectly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related