Laravel - Compiling Assets - Tailwindcss

Tailwind CSS is a modern, utility-first framework for building amazing sites without ever leaving your HTML. Let's dig into how to start using it in a Laravel project with Laravel Mix. First, we should install Tailwind using NPM and generate our Tailwind configuration file:

    npm install
    npm install -D tailwindcss
    npx tailwindcss init

The init command will generate a tailwind.config.js file. Within this file, you may configure the paths to all of your application's templates and JavaScript so that Tailwind can tree-shake unused styles when optimizing your CSS for production:

    purge: [

Next, you should add each of Tailwind's "layers" to your application's resources/css/app.css file:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Once you have configured Tailwind's layers, you are ready to update your application's webpack.mix.js file to compile your Tailwind powered CSS:

    mix.js('resources/js/app.js', 'public/js')
        .postCss('resources/css/app.css', 'public/css', [

Finally, you should reference your stylesheet in your application's primary layout template. Many applications choose to store this template at resources/views/layouts/app.blade.php. In addition, ensure you add the responsive viewport meta tag if it's not already present: