[Solved] Installing Font Awesome with Tailwind in Laravel 8

Problem :

Add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receive 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'

Solution:

1. Change the code of webpack.mix.js as below

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    });

2. Install Font Awesome (↓ in case of free version)

npm install --save @fortawesome/fontawesome-free

3. Create a new file [ resources\sass\app.scss ] and add the code as below. ( resources/css/app.css won't be used.)

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@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. Build them.

npm install && npm run dev

Thank you for reading the article. If it's helpful to you please share this article with others.