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.