I just created a new project with Laravel and Sail. I am noticing that some Tailwind css classes are not loading when I run "sail npm run dev". For example, an element that had the utility "py-5" was not loading. So, I decided to try compiling with Laravel Mix again and it finally worked. Same happened when working with Tailwind css column classes. When I run Mix it always shows it compiled successfully.
Any ideas?
The problem probably results because you want to build tailwindcss once in the container but it is not configured / installed there. Locally it seems to work for you already. Therefore, you should go through the following steps.
Make sure that you are already install tailwind and other dependency via: sail npm install.
Check always if you have postcss anbd autoprefixer installed via sail: sail npm install -D tailwindcss#latest postcss#latest autoprefixer#latest.
Then check your webpack.mix.js file. It have to look like:
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Add to your css file this three lines:
#tailwind base;
#tailwind components;
#tailwind utilities;
Then run sail npm run dev.
Tailwind has a config option (tailwind.config.js) in what files it will look for the classes used, make sure all the files you use the tailwind class in are part of the content option.
module.exports = {
...
content: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
],
...
}
Related
How can I solve this warning when creating laravel project?
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
Steps to replicate:
composer create-project --prefer-dist laravel/laravel example
cd example
composer require laravel/ui
php artisan ui vue --auth
npm install vue#next vue-router#next vue-loader#next
npm install
npm run dev
EDIT
From this solution, add these lines to webpack.mix.js
mix.webpackConfig({
stats: {
children: true,
},
});
The above solution creates another warning:
WARNING in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-6.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[4]!./resources/sass/app.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2423:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Child mini-css-extract-plugin C:\xampp\htdocs\lva\node_modules\css-loader\dist\cjs.js??clonedRuleSet-6.use1!C:\xampp\htdocs\lva\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-6.use[2]!C:\xampp\htdocs\lva\node_modules\resolve-url-loader\index.js??clonedRuleSet-6.use[3]!C:\xampp\htdocs\lva\node_modules\sass-loader\dist\cjs.js??clonedRuleSet-6.use[4]!C:\xampp\htdocs\lva\resources\sass\app.scss compiled with 1 warning
webpack compiled with 1 warning
How can I solve this?
The color-adjust shorthand is currently deprecated and it depends on the autoprefixer#10.4.6 (source).
I was able to fix this by reverting the autoprefixer package as well as #Benno to version 10.4.5. Run this:
npm install autoprefixer#10.4.5 --save-exact
You probably updated your npm packages. I was able to fix this by reverting the autoprefixer package to version 10.4.5 in the package-lock.json.
when you have problem with autoprefixer maybe because your version autoprefixer. you can add version autoprefixer based problem this version autoprefixer . i have problem on "print-color-adjust" and i add code on my package.json for change my autoprefixer become version "10.4.5"
when you use npm
"overrides": {
"autoprefixer": "10.4.5"
},
Or, when you use yarn
"resolutions": {
"autoprefixer": "10.4.5"
},
Don't forget to delete your package-lock and node_modules , then npm install again.
it work for me (react-bootstrap.v.5)
If you don't want to add additional packages to solve this error, then try this:
Capitalize all the files and Directory name in your components folder
Or you can run this command to install a package if the above solution doesn't work.
npm install autoprefixer#10.4.5 --save-exact
I'm using React with InertiaJS and Laravel as backend, this solution worked in my case.
Thanks
I have the same problem, whenever I hit save an annoying pop-up of error code comes. The simple solution is to add the following code to your webpack.mixjs file :
mix.webpackConfig({
stats: {
children: true,
},});
stop the npm run watch
add a package autoprefixer, add below in terminal:
npm install autoprefixer#10.4.5 --save-exact
run npm run watch and it will not give the error again.
I solved this issue within Laravel by changing the file ./node_modules/bootstrap/scss/forms/_form-check.scss
Line 28 part of the .form-check-input style
change color-adjust: exact; // Keep themed appearance for print
to print-color-adjust: exact; // Keep themed appearance for print
I'm trying to install Tailwind CSS v2.0 into a clean Laravel install, but it is not installing complete css properties like .p-2 and other properties i am following official installation https://tailwindcss.com/docs/guides/laravel but still it is not
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
\resources\css\app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Recently Tailwindcss update their framework(v3.0.7) in which css file is download in purgecss(https://purgecss.com/), thats why you cant download all the classes and properties of tailwindcss.
For that what you can do is download downgraded version of tailwindcss you can download it in your custom folder not even in Laravel.
first, run laravel new your_project_name in your terminal,
run npm install or npm i on your terminal
run cd/your_project_name in your terminal
run npm install -D tailwindcss#^1.9.2 in your terminal
then go to your project folder and open it on vs code or any code editor
add below code in you
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
add below code in resources\css\app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
last run npm run dev in your cmd
Thank you.
Check to see that you're not running npm run prod as this purges your css files and removes unused styles.
Run npm run dev and see if that helps.
I want to install Vue 3 into a Laravel 8 project, but I don't want to use something like laravel/ui because it adds Bootstrap and a bunch of other stuff I don't want.
I tried npm i vue#next, and it installs Vue 3, but when I try to do import { createApp } from 'vue'; in app.js, etc., I get a bunch of Webpack errors on npm run dev with Laravel Mix ("laravel-mix": "^6.0.6", in package.json).
This is the webpack.mix.js file I'm using:
const mix = require('laravel-mix');
mix
.extract(['vue'])
.js('resources/js/app.js', 'public/js/')
.vue()
.version();
And I get this error when I run npm run dev:
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
(Stack trace here.)
Does anyone know how to simply install Vue 3 (without a bunch of additional scaffolding) in Laravel 8? Thank you.
After searching more, I found another SO post with essentially the same question and an answer that worked.
Instead of just doing npm i vue#next, I had to do the following instead:
npm i -D laravel-mix#next vue#next #vue/compiler-sfc vue-loader#next
After that, everything worked as expected.
Here's the SO post I referenced: Install vue 3.0 in laravel
I'm starting to study VUEJS with Hot Module Replacement (or HMR), and I did a clean install of Laravel v5.8, and following the instructions in the documentation of the Laravel Mix -- https://laravel.com/docs/5.8/mix -- everything looks very simple, however, when running the npm run hot, error is displayed in the browser console.
Apparently it is functional, but I'm not sure if this is expected behavior or if in fact it is an error and that needs some adjustment or parameterization.
But the interesting thing is that if I run npm run dev, no error is displayed.
versions
# php artisan --version
Laravel Framework 5.8.37
# npm -v
6.13.4
# node -v
v12.16.1
# yarn -v
1.21.1
webpack.mix.js
const mix = require('laravel-mix');
mix.options({
hmrOptions: {
host: 'vueapp.lab',
port: '8080'
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
The reason for that is the app.scss is compiled by default by webpack and it is linked as a resource in mix.config.js.
So removing app.scss compilation from your mix.config.js and import it to your main .vue file (default is App.vue) hmr will do the trick.
In your main vue file add tag style like this:
<style lang="scss">
#import 'path/to/app.scss';
</style>
I have clear Laravel 5.7 installation and I need to install izimodal package
So I have installed by npm install izimodal.
For the next step, I initialized this package in my /resources/js/bootstrap.js like:
import iziModal from 'izimodal/js/iziModal';
$.fn.iziModal = iziModal;
and run npm run dev to compile app.js
At this stage, the package was successfully imported and working but I missing CSS part of izimodal... How can I correctly initialize this package with CSS? I have tried this code in my webpack.mix.js but it does not work:
mix.copy('node_modules/izimodal/css/iziModal.css', 'resources/css');
mix.styles([
'resources/css/reset.css',
'resources/css/style.css'
], 'public/css/app.css');
Solved. Just added to my app.scss
// npm-package
#import "~izimodal/css/iziModal.css";
// Custom CSS
#import "../css/reset.css";
#import "../css/style.css";