DEV Community

Cover image for Setting up TailwindCSS v3 with Laravel v8.8.1 & later.
Ridwan Kasim
Ridwan Kasim

Posted on • Edited on

Setting up TailwindCSS v3 with Laravel v8.8.1 & later.

Tailwind is a popular utility-first CSS framework that helps developers build and design their products very fast without wasting much time.

In this article, we'll be looking at how to configure & set up tailwind in a laravel project.

Before moving along, make sure you have your development environment set up for Laravel.
Let's start by bootstrapping our laravel project with the command below:

laravel new sample-app
Enter fullscreen mode Exit fullscreen mode

OR

composer create-project laravel/laravel sample-app
Enter fullscreen mode Exit fullscreen mode

Navigate to the project directory by doing:

cd sample-app
Enter fullscreen mode Exit fullscreen mode

Let's bring our project up with the command below from the terminal:

php artisan serve
Enter fullscreen mode Exit fullscreen mode

The above command will start up our project and keep it running. You can access it through your favourite browser on http://127.0.0.1:8000

preview

Now we can install tailwindcss in our already laravel project by doing:

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Then we create the config file:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

You should see a message like the one in the image below
preview

Now open the project in your favourite code editor and add the following to the tailwind.config.js file inside the content array.

'./resources/**/*.blade.php',
'./resources/**/*.js',
Enter fullscreen mode Exit fullscreen mode

Now we need to tell Laravel to compile our Tailwind resources using Laravel Mix. Open the webpack.mix.js file in the root of our project & include tailwindcss as a postCss plugin as seen below:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss")
    ]);
Enter fullscreen mode Exit fullscreen mode

Lastly, we need to import all @tailwindcss component layers into our project css. Open the resources/css/app.css file and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Voila! Configuration is done and you can watch for changes and compile assets in real-time during development.

npx mix watch
Enter fullscreen mode Exit fullscreen mode

You should have something like the image below
preview

Let's open our welcome.blade.php file and replace everything there with the code below to test our set up:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body class="bg-[#063970]">
    <div class="text-center mt-12">
        <h1 class="text-4xl text-white font-semibold">Welcome!!!</h1>
        <p class="text-xl text-white mt-4">This is a tailwind page</p>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You should have a screen like the image below:
preview

That's all you need to do in order to set up tailwindCSS in your laravel project.

Happy coding!

Top comments (0)