Tailwind MenuBar Demo

See the Pen Tailwind Menu by Zeeshan Hayat (@zeenux) on CodePen.

Tailwindcss Login Form Demo

Login Form using Tailwindcss

See the Pen by Zeeshan Hayat (@zeenux) on CodePen.

Tailwind with Laravel 8

Install Tailwind in Laravel 8

Install Laravel

  laravel new tailwindcss-demo

Fetch Dependencies

npm install

Install tailwindcss

This will fetch the required dependencies and will install tailwindcss on your project

npm install tailwindcss

Add Tailwindcss

Add the following to resources/css/app.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Create your tailwindcss config file

npx tailwindcss init

Add the following to webpack.mix.js file

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

Compile

npm run dev

Add the style sheet to your blade file

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

That's it. Now you can start using tailwindcss in your laravel blade files