Back to Blog

Published: May 30, 2020

Setup Tailwindcss in Laravel 7.x

In this tutorial we are going to install Tailwindcss in Laravel 7 application. Tailwindcssis a utility-first CSS framework. With this framework you can make custom designs without writing any CSS.

Install Tailwindcss in Laravel 7

Now it is time to install Tailwindcss! Installing Tailwindcss is not difficult.

First, we create a new Laravel project by running the laravel new <project name> command.

Then we are going to install Tailwindcss via npm. Open a terminal and run the following command: npm install tailwindcss. Then we are going to add tailwind to our app.scss file located in: resources/sass/app.scss.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Tailwind config

The next step is to generate the Tailwind config file. We generate the file by running npx tailwindcss init. This command will create a minimal tailwind.config.js file at the root of the project. Click here if you want more information on this topic.

Laravel Mix

Now we have to setup Tailwindcss in Laravel Mix. Open “webpack.mix.js” from the root directory and change the content with the following:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
      processCssUrls: false,
      postCss: [ tailwindcss('./tailwind.config.js') ],


Now we can use the Tailwindcss classes. Open the “welcome.blade.php” file, delete everything and add the following code:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('', 'Laravel') }}</title>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
        <!-- Styles -->
        <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <body class="bg-orange-500">
        <h1 class="text-4xl text-center text-white font-bolder">Welcome to Laravel with Tailwindcss!!</h1>

The last step is to run the following commands: npm run watch & php artisan serve. The first command will compile all the assets. The second command will start the Laravel server.

If everything went well, you should see the following output:


That’s it! Now you can start creating beautiful designs with Tailwindcss.

Learn Tailwindcss

Adam Wathan is the founder of Tailwindcss and has a YouTube Chanel with lots of tutorials on Tailwindcss. Adam recreate designs of existing websites what is nice.


In this repository you can find the source code for this tutorial. If you have any questions, feel free to ask! And checkout my new website!

Follow me on twitter to get notified when I post a new blog @larapeakdev