I have troubles using tailwind.css when install according to https://tailwindcss.com/docs/guides/laravel
When trying to run npm run dev
Error: failed to load config from vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path' is thrown.
tailwind.config.js:
module.exports = {
content: [
'./resources//*.blade.php',
'./resources//.js',
'./resources/**/.vue',
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
],
theme: {
extend: {},
},
plugins: [],
}
vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
app.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
Related
Trying to implement the CRUD example with Laravel and vue3 from
https://laraveldaily.com/post/laravel-8-vue-3-crud-composition-api
the step npm run dev throws
failed to load config from F:_MYDATA\ProjectsLaravel\nuky\vite.config.js
error when starting dev server:
Error: Cannot find module '#vitejs/plugin-vue'
The vite.config.js looks like:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
})
],
});
Seemingly the error is in the config file itself. Anyway, I tried restarting VSC, TS server and executing a npm i -D #types/node
Also tried: npm i #vuejs/plugin-vue
Nothing helped.
How to use laravel vite with custom package development. I tried to add my path to vite.config.js but am getting an error.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
// input: ['../Packages/Plugin/Customers/public/css/styles'],
refresh: true,
}),
],
});
I tried to duplicate this in my package folder but same error. Can you please assist.
I followed Kamlesh login, I was able to create vite.config.js file inside my custom package as shown below.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/asset/css/settings.css',
'resources/asset/js/custom.js',
'resources/asset/js/ecstore_profile.js',
'resources/asset/js/general_settings.js',
]),
],
resolve: {
alias: {
'settings': '/resources/asset/css/settings.css',
'custom': '/resources/asset/js/custom.s',
'profile': '/resources/asset/js/ecstore_profile.js',
'general': '/resources/asset/js/general_settings.js',
},
},
});
Then I added each file to the vite.config.js file. Then run build inside the custom package and publish this to laravel public folder. all working fine.
Here is my vite.config.js
`
import {
defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js'
]), ],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});
`
app.js code
import '../../swiper/swiper-bundle';
import '../../jquery/dist/jquery';
I try to import packages that installed vs npm but I am not able to import those packages files in the app.js file
I'm trying to build two separate CSS files using Tailwindcss, Laravel and vite-plugin.
The two css files use different configuration, but I have no idea how specify the correct tailwind.config.js for each builds.
app.css should use tailwind.config.js
mail.css should use tailwind-mail.config.js
vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
refresh: true,
})
]
})
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {},
plugins: [require("#tailwindcss/forms"), require("#tailwindcss/typography")],
}
tailwind-mail.config.js
module.exports = {
content: ["./resources/views/mails/**/*.blade.php"],
theme: {},
plugins: [require("#tailwindcss/typography")],
}
I haven't try myself yet, but reading the release notes of Tailwind CSS v3.2 it should be fairly easy to split into two CSS files using #config <filename>:
app.css
#config "./tailwind.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
mail.css
#config "./tailwind.mail.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
refresh: true,
})
]
})
I'm trying to replace the Tailwindcss compiler with #tailwindcss/jit in a Laravel project that is using Vue Laravel Mix but I'm getting this Unknown word error.
✖ Mix Compiled with some errors in 489.07ms
ERROR in ./resources/sass/app.scss Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/dist/cjs.js): SyntaxError
(1:1) /Users/username-76/Desktop/projectname/resources/sass/app.scss
Unknown word
1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^ 2 | import content from "!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[3]!./app.scss";
3 |
at processResult (/Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:701:19)
at /Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:807:5
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/username-76/Desktop/projectname/node_modules/postcss-loader/dist/index.js:140:7)
1 ERROR in child compilations (Use 'stats.children: true' resp.
'--stats-children' for more details) webpack compiled with 2 errors
app.scss
/* purgecss start ignore */
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind utilities;
html, body {
#apply font-sans;
#apply text-darkblue;
}
webpack.mix.js
const mix = require('laravel-mix');
mix.disableSuccessNotifications();
mix.js('resources/js/app.js', 'public/js').vue();
mix.postCss("resources/sass/app.scss", "public/css", [
require("#tailwindcss/jit"),
]);
mix.version();
You're using the PostCSS plugin, yet you are attempting to compile SASS. Do it the following way instead.
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')
])
.options({
postCss: [ tailwindcss('./tailwind.config.js') ],
})
Your app.css would include Tailwind:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
And then in your tailwind.config.js would include the just-in-time mode.
module.exports = {
mode: 'jit',
/* These paths are just examples, customize
them to match your project structure
*/
purge: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
}
}