Setting up TailwindCSS v3 with Laravel v8.8.1 & later.
Tags: tutorial, laravel, tailwindcss, v3
Published: 2022-01-31 07:52:01

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](https://laravel.com). 
Let's start by bootstrapping our laravel project with the command below:

```
laravel new sample-app
```
#### OR
```
composer create-project laravel/laravel sample-app
```

Navigate to the project directory by doing:

```
cd sample-app
```
Let's bring our project up with the command below from the terminal:

```
php artisan serve
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjrzee44qk3gbb8kbofe.png)
 
Now we can install `tailwindcss` in our already laravel project by doing:

```
npm install -D tailwindcss postcss autoprefixer
```
Then we create the config file:

```
npx tailwindcss init
```
You should see a message like the one in the image below
![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7st570xa0201ewe1opsu.png)
 
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',
```
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")
    ]);
```
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;
```
Voila! Configuration is done and you can watch for changes and compile assets in real-time during development.

```
npx mix watch
```
You should have something like the image below
![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/reoc9nqasicbeofv97cd.png)
 
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>
```
You should have a screen like the image below:
![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsmfe01wr62qnqzk8fdz.png)
 
That's all you need to do in order to set up tailwindCSS in your laravel project.

Happy coding!