Hey guys
So I'm trying to get tailwind in a new Laravel app and I'm either lost or it's not working.
resources/app/app.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
My tailwind config is as follows:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
and postcss config
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Then i load that in to my resources/js/app.js file
import './bootstrap';
import '../css/app.css';
So I then run npm run dev and I have tried npm run build, which then does nothing and my styles are not loading.
My vite file is:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js',
],
refresh: true,
}),
],
});
How im using in blade
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artists</title>
@vite('resources/js/app.js')
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Im using the latest version of Laravel, so any help would be wonderful
I've not used Tailwind with Vite, but looking at the framework specific instructions, they look to defer slightly from the Laravel instructions.
https://tailwindcss.com/docs/guides/vite#vue
Specifically this section:
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
These might be needed for Vite transpilation
@Talinon they have a guide specific to Laravel.
@thinkverse Yes, but he is also using Vite.
@Talinon as is the guide, there are two guides for Laravel, one with Vite which is the default, and one for Laravel Mix.
@thinkverse Ah yes, you are correct. I missed that.
@Talinon Thanks for this (a year later I know), you saved me a headache
Open devtools with f12 and see if there are errors
I see you wrote that app.css is under resources/app/app.css but in your app.js you are using ../css/app.css, is that a mistype in the post or in the app.js file?
How are you using app.js in your views? With or without the @vite directive? Just tried using Tailwind CSS like you are trying to and I got it to work and cannot replicate your issue.
Could you perhaps upload a reproduction?
@thinkverse So i think that was a typo - Im using the vite directive
@GrahamMorbyDev if you fork my reproduction does it work for you then? š¤
@thinkverse Yeah that didn't work
@GrahamMorbyDev are you getting any errors in the console or anything when you run npm run dev or npm run build? Is your node version compatible with Vite? Vite requires node versions compatible with ^14.18.0 or >=16.0.0.
@thinkverse Nope its just not building out anything
@thinkverse My vite output
VITE v3.1.3 ready in 469 ms
ā Local: http://localhost:5173/ ā Network: use --host to expose
LARAVEL v9.31.0 plugin v0.6.1
ā APP_URL: http://localhost
@thinkverse My css file in broswer looks so
Right hang on a second
So loading vite and then using sail doesnt work
when I load via localhost it works ??
@GrahamMorbyDev haven't used Sail myself but does your docker-compose match the stub? Also, did you run npm run or ./vendor/bin/sail npm run? Could be you're starting the Vite server outside of Sail and that's the issue?
It should be
@vite('resources/css/app.css', 'resources/js/app.js')
@t9dev be aware of
If you're importing your CSS via JavaScript, you only need to include the JavaScript entry point:
https://laravel.com/docs/9.x/vite#loading-your-scripts-and-styles
@t9dev you can do it both ways, you don't necessarily need the CSS file, it can be loaded via JavaScript as well. And if you need more inputs you should pass them in as an array not as separate string arguments.
@vite(['resources/css/app.css', 'resources/js/app.js'])
The second argument is the path to the build directory, so if you've changed your output directory from the default build that's where you want to add it.
As it is now your suggestion will generate an exception.
@Sinnbeck & @thinkverse , I tried that before, but the tailwind styles didn't apply to elements, so I did this.
@t9dev Laravel's Vite directive has never allowed more than one input unless they're in an array, it has been like that since it was introduced. Either you have been using another Vite plugin, like Innocenzi's plugin or you added them as an array and forgot. Because adding two or more inputs as string arguments will throw an exception since the second parameter is an optional build directive.
@thinkverse , how to check that? In composer ?
@t9dev in your package.json, Laravel's package is laravel-vite-plugin, Innocenzi package is vite-plugin-laravel or the previous and now deprecated laravel-vite.
@thinkverse , it is a laravel-vite-plugin
@t9dev strange, if I try your way, adding them as separate arguments, I get thrown an exception as predicted.
Vite manifest not found at: /Users/thinkverse/Sites/tailwind/public/resources/js/app.js/manifest.json
Weird it doesn't throw an exception for you.
Also do not forget the VITE file
input: ['resources/css/app.css', 'resources/js/app.js'],
I was having an issue when using Herd, where tailwind was working, but some blade files had no tailwind styles applied. Using PHP artisan serve and localhost, instead of Herd vanity domain worked.
Please or to participate in this conversation.