#TailwindCSS and Vite not working in my laravel project live server

1 messages · Page 1 of 1 (latest)

urban mountain
#

Hi. I am new to laravel and tailwindcss via Vite.

Why does my @vite not working on live server.

In localhost, i tried npm run build, and the tailwind vite works even if i dont input "npm run dev". but when i upload the project in live hosting server, it doesnt work anymore.

here's my config

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    build: {
        chunkSizeWarningLimit: 1600,
      },
});

in my app.blade.php i just insert

@vite(['resources/css/app.css', 'resources/js/app.js'])

for my @vite to work, i need to open a terminal in my localhost and then npm run dev. but in live server, do i need to npm run dev as well and install npm or something i need for npm to work?

#

TailwindCSS and Vite not working in my laravel project live server

vestal atlas
#

Move tailwindcss() from plugins to css.postcss.plugins
Since vite has postcss dependencies it's better to use it instead of installing postcss module again and also you can remove postcss.config and use vite postcss option

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

export default defineConfig({
    css: {
      postcss: {
        plugins: [tailwindcss()],
      },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    build: {
        chunkSizeWarningLimit: 1600,
      },
});
urban mountain
#

still not working sir. i delete postcss.config.js and in vite.config.js i update the config like this

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

export default defineConfig({
    css: {
      postcss: {
        plugins: [tailwindcss()],
      },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    build: {
        chunkSizeWarningLimit: 1600,
      },
});
#

did i do it correctly?

vague hare
#

If I do this I get "(0 , tailwindcss_1.default) is not a function"

urban mountain
#

what do you mean sir

vestal atlas
urban mountain
#

i think the link is down, sir.

#

in localhost after npm run build, it works now. then i copy my localhost project and upload it on live server, its not working anymore.

urban mountain
#

Update: I think the problem is with my .htaccess file.
Because if i put "/public" in my url. The Vite works.
for example www.mywebsite.com/public

this is my .htaccess config

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/ [L]
</IfModule>

i have that htaccess to remove the "/public" in my url for my website to work

torpid surge
#

postcss.config.js on root

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};