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'm trying to add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receiving the following error
Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.4, but postcss-import uses 7.0.35. Perhaps this is the source of the error below.
Error: Failed to find '~#fortawesome/fontawesome-free/scss/brands'
App.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Webpack.mix
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
Webpack config
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
First, set up
webpack.mix.js as follows:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
2.- Go ahead and install fontawesome:
npm install --save #fortawesome/fontawesome-free
3.- Create a new file "resources/sass/app.scss" and include the following:
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
4.- Execute the following commands:
npm install && npm run dev
and again
npm run dev
.
Steps
Before triggering Laravel Mix, we want Node.js and NPM installed on your machine.
node -v
npm -v
Install Node dependencies for Laravel Mix, Webpack, Autoprefixer, and PostCSS.
npm install autoprefixer#latest && npm install laravel-mix#latest && npm install postcss#latest && npm install webpack#latest --save-dev
Install the latest free version of Font Awesome via the npm package manager.
npm install #fortawesome/fontawesome-free --save-dev
Next, build your webpack.mix.js configuration. Please note that the default Laravel 8 install no longer uses SASS (as we did in previous Laravel versions) to compile our CSS assets.
const mix = require('laravel-mix');
mix.setPublicPath('public')
mix.setResourceRoot('../');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
The following dependency entry should now be in
your package.json.
// Font Awesome
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
In /resources/css/app.css, import one or more styles depending on which icon set you are interested in using.
#import '~#fortawesome/fontawesome-free/css/fontawesome';
#import '~#fortawesome/fontawesome-free/css/regular';
#import '~#fortawesome/fontawesome-free/css/solid';
#import '~#fortawesome/fontawesome-free/css/brands';
Now, we want to update our package.json to use the new Mix CLI. Please change the "scripts" section of package.json to the following.
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
Compile your assets and produce a minified, production-ready build.
npx mix -p
OR
npm run prod
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
Happy Mixing!
I have it working by running: npm install font-awesome --save
I created resources/sass/custom.scss and added .sass('resources/sass/custom.scss', 'public/css'); to
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'))
.sass('resources/sass/custom.scss', 'public/css');
in webpack.mix.js.
Then adding #import "node_modules/font-awesome/scss/font-awesome.scss"; to resources/sass/custom.scss.
After running npm run watch font awesome was available.
I know this is old but for anyone else this is my process; Laravel 8 framework, Webpack, Laravel Mix.
In my webpack.mix.js file I use the following:
if (mix.inProduction()) {
mix.copy('node_modules/#fortawesome/fontawesome-free/webfonts', 'public/fonts/font-awesome');
}
I then run this once before I start development:
npm run production
This copies all font awesome files to the public folder and ensures they are not copied during development.
Then, depending on where you copy your font awesome files to, you need to set the following just before importing font awesome within your main .scss file:
$fa-font-path: "/fonts/font-awesome/";
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Note - if you don't do this, the default font awesome public path referenced in your compiled .css file will be ../webfonts/ and cannot be loaded by your .css file.
I have this same exact problem, I found this question by searching for the solution, but none of the answers here worked.
Somehow, I've just managed to solve this, though I'm afraid it's a rather dirty solution. Perhaps someone with more knowledge of Mix can clean it up.
Here's what I've done in my webpack.mix.js file to fix this:
/*
* slow compile fix: https://github.com/tailwindlabs/tailwindcss/discussions/1514#discussioncomment-51903
*/
const mix = require('laravel-mix');
mix.js(
'resources/js/app.js',
'public/js'
)
.postCss(
'resources/css/tailwind.css',
'public/build/css',
[
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
)
.postCss(
'node_modules/#fortawesome/fontawesome-free/css/all.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.postCss(
'resources/css/main.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.combine(
[
`public/build/css/all.css`,
`public/build/css/tailwind.css`,
`public/build/css/main.css`,
],
`public/css/app.css`
)
Check the spelling of fontawesome.
#import '~#fontawesome/fortawesome-free/scss/brands';
#import '~#fontawesome/fortawesome-free/scss/regular';
#import '~#fontawesome/fortawesome-free/scss/solid';
#import '~#fontawesome/fortawesome-free/scss/fontawesome';
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 want to use the Tabler administration panel on Laravel. I'm attempting to install Tabler UI with npm.
npm install tabler-ui
I add the tabler package to resources/sass/tabler.scss and then add the SASS file to webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/tabler.scss', 'public/css');
But after trying to npm run watch, I got the following error.
File to import not found or unreadable:
../../../node_modules/bootstrap/scss/bootstrap.scss.
When I check the node_modules/tabler-ui/src/assets/scss/bundle I find a line which imports the bootstrap:
#import '../../../node_modules/bootstrap/scss/bootstrap.scss';
The error is for this line; I think this line should be like this:
#import '~bootstrap/scss/bootstrap.scss';
I cannot change this line because it is in the /node_modules folder. What should I do to solve this problem?
In your app.scss
replace this:
// Bootstrap
#import '~bootstrap/scss/bootstrap';
with this:
// Tabler
#import '~tabler-ui/src/assets/scss/variables';
#import '~bootstrap/scss/bootstrap';
#import '~tabler-ui/src/assets/scss/dashboard/dashboard';
Looks like bootstrap is a peer dependency.
Run npm install bootstrap to install it
I try to use SweetAlert with Laravel 5.5 usin Larvel Mix, but not work properly
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/sweetalert/dist', 'public/js');
package.json
"devDependencies": {
...
"bootstrap-sass": "^3.3.7",
...
"jquery": "^3.2",
"laravel-mix": "^1.0",
"sweetalert": "^2.0.8",
resource/assets/sass/app.css
// Sweet Alert
#import url("https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css");
when I execute npm run dev compiling without any errors.
But when I use with this method, alerts show without CSS style of SweetAlert.
After
npm install sweetalert2 --save
you should do like below in your app.js:
window.Swal = require('sweetalert2');
Or
#import "~sweetalert2";
In your resources/assets/sass/app.scss file,
Use this line instead
#import "~sweetalert2";
What you were doing (importing the CSS from a CDN) has nothing to do with npm at all.
Step 1: npm install sweetalert --save run this command in your terminal/cmd.
Step 2: In your resources/js/app.js file, simply import it into your application import swal from 'sweetalert';