Installing Font Awesome with Tailwind in Laravel 8

Question

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'),
        },
    },
};

Answer 1

1. 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

.

Answer 2

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!

Answer 3

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.

Answer 4

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.

Answer 5

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`
    )