WARNING You're browsing the documentation for an old version of Laravel. Consider upgrading your project to Laravel 11.x.
While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Tailwind CSS, Inertia, and / or Livewire that will be helpful for many applications. By default, Laravel uses NPM to install frontend packages.
The Tailwind CSS and Livewire / Inertia scaffolding provided by Laravel is located in the laravel/jetstream
Composer package, which may be installed using Composer:
composer require laravel/jetstream
Once the laravel/jetstream
package has been installed, you may install the frontend scaffolding using the jetstream:install
Artisan command:
// Generate basic scaffolding...
php artisan jetstream:install livewire
php artisan jetstream:install inertia
// Generate team support scaffolding...
php artisan jetstream:install --teams
{tip} To learn more about Laravel Jetstream, please consult the official Jetstream documentation.
Laravel Mix provides a clean, expressive API over compiling SASS or Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the full Laravel Mix documentation for more information on compiling SASS or Less.
Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using Inertia and Vue. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Laravel Mix to easily compile JavaScript components into a single, browser-ready JavaScript file.
After installing the laravel/jetstream
Composer package and generating the frontend scaffolding, Laravel's package.json
file will include Tailwind CSS packages to help you get started prototyping your application's frontend using Tailwind. However, feel free to add or remove packages from the package.json
file as needed for your own application. You are not required to use the Tailwind framework to build your Laravel application - it is provided as a good starting point for those who choose to use it.
Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
npm install
Once the dependencies have been installed using npm install
, you can compile your CSS files using Laravel Mix. The npm run dev
command will process the instructions in your webpack.mix.js
file. Typically, your compiled CSS will be placed in the public/css
directory:
npm run dev
The webpack.mix.js
file included with Laravel's frontend scaffolding will compile the resources/css/app.css
file. This app.css
file contains the proper starting configuration for Tailwind CSS. Feel free to customize the app.css
file however you wish.
When using the Jetstream Inertia scaffolding, all of the JavaScript dependencies required by your application can be found in the package.json
file in the project's root directory. This file is similar to a composer.json
file except it specifies JavaScript dependencies instead of PHP dependencies. You can install these dependencies using the Node package manager (NPM):
npm install
Once the packages are installed, you can use the npm run dev
command to compile your assets. Webpack is a module bundler for modern JavaScript applications. When you run the npm run dev
command, Webpack will execute the instructions in your webpack.mix.js
file:
npm run dev
By default, the Laravel webpack.mix.js
file compiles your CSS and the resources/js/app.js
file. Your compiled JavaScript will typically be placed in the public/js
directory.
last update:2020-09-10 14:17{tip} The
app.js
file will load theresources/js/bootstrap.js
file which bootstraps and configures your basic JavaScript dependencies. If you have additional JavaScript dependencies to configure, you may do so in this file.