If you have Tailwind and Bouncer pre-installed, you can move on to the Installation section.

1) Tailwind Installation#

Install Tailwind as shown below:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, generate your tailwind.config.js file:

npx tailwindcss init

In your tailwind.config.js file, configure the purge option with the paths to all of your Blade templates and JavaScript components so Tailwind can tree-shake unused styles in production builds:

module.exports = {
purge: [
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
variants: {
extend: {},
plugins: [],

In your webpack.mix.js, add tailwindcss as a PostCSS plugin:

.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [require("tailwindcss")]);

Open the ./resources/css/app.css file and add the following code, replacing the original file contents:

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Next, import your stylesheet in your main Blade layout (commonly resources/views/layouts/app.blade.php or similar) and add the responsive viewport meta tag if it's not already present:

<!doctype html>
<!-- ... --->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- ... --->

2) Bouncer Installation#

Install Bouncer with composer:

composer require silber/bouncer v1.0.0-rc.10

Add Bouncer's trait to your user model:

use Silber\Bouncer\Database\HasRolesAndAbilities;
class User extends Model
use HasRolesAndAbilities;

Publish Bouncer's migrations to your app's migrations directory by running the following command:

php artisan vendor:publish --tag="bouncer.migrations"


  1. Install the Sharedo package with composer as shown below:

    composer require geekyants/sharedo
  2. After installation, move the package's config file to your project's config folder:

    php artisan vendor:publish --tag="config"
  3. Moving forward, scaffold the view components present in the sharedo package as follows:

    php artisan ui sharedo

    Sharedo folder containing Vue.js components will be created in your resources directory. You can now easily customise your Sharedo's Vuejs components 🚀

  4. Now, run the migrations. After executing this command, Bouncer migrations and the new_users_sharedo table will be migrated:

    php artisan migrate
  5. To compile and minify the CSS and JavaScript files generated by sharedo, add this to your webpack.mix.js file:

    .js("resources/js/sharedo.js", "public/js")

    Note: If your css is not compiled in your app.css file, you can change it in the sharedo.blade.php file.

  6. Install the dependencies:

    composer install
    npm install
  7. Finally, build your assets as shown below:

    npm run dev