Set up Laravel 10 on Unix system - Zero to Hero

Ali AnwarAli Anwar
2 min read

Pre-requisite - Php 8.1 or greater must be there

1. Download and Install Composer -

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer

2. Create a Laravel Project (birthday) using Composer create-project command -

 composer create-project laravel/laravel birthday

The Laravel Projectbirthdayis ready to be served and developed now.

2a. Serve the birthday Project -

 php artisan serve

You can see the welcome page athttp://localhost:8000/

3. Install vite for building CSS and JS assets -

vite is already present by default in Laravel package.json, so we have to just install it by -

npm i

3a. Add CSS and JS path in <head> of your html to pick compiled js,css and show reactive changes -

@vite(['resources/css/app.css', 'resources/js/app.js'])

4. Install Tailwind CSS in Laravel -

4a. Install Tailwind CSS and its dependencies

npm install -D tailwindcss postcss autoprefixer

4b. Generate tailwind and postcss config files -

npx tailwindcss init -p

Now two files -tailwind.config.js and postcss.config.js will be created.

4c. Add paths into tailwind.config.js whose css classes tailwind should listen to -

/** @type {import('tailwindcss').Config} */
   export default {
     content: [
         "./resources/**/*.blade.php",
         "./resources/**/*.js",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

4d. Add the @tailwind directives to your CSS in ./resources/css/app.css file

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

4e. Build the page -

npm run dev

We are good to go for development with laravel 10 and TailwindCss. And all the changes are reactive i.e the moment you change anything in the file, it will be updated on the browser reactively.

1
Subscribe to my newsletter

Read articles from Ali Anwar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

LaravelLaravel 10coder

Written by

Ali Anwar
Ali Anwar