Setup Tailwindcss in Laravel 7.x

In this tutorial we are going to install Tailwindcss in Laravel 7 application. Tailwindcss is 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 resources/sass/app.scss file.

@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')
        .options({
            processCssUrls: false,
            postCss: [ tailwindcss('./tailwind.config.js') ],
        });

Testing

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()) }}">
    <head>
        <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('app.name', 'Laravel') }}</title>

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

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:

The result

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

Learn more about Tailwindcss

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

GitHub

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

Leave a comment

Your email address will not be published. Required fields are marked *