How to use Tailwind CSS in your Laravel Project ~ pixelcave

Adding Tailwind CSS 2 to your Laravel 8 project is a relatively simple task. If you don't have a Laravel project, you can easily create a new one by using the Laravel installer.

Before moving on, make sure that you've installed all required npm dependencies by running the following command at the root folder of your project:

> npm install

Install required dependencies and add a config file

The first thing we must do is to add the modules required by Tailwind CSS. Those would be the framework itself as well as PostCSS and Autoprefixer. We can install them by running the following command:

> npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

PostCSS is not actually needed to be installed since it is already included by Laravel in the latest versions but in case you are using an older one, make sure that you have it. Moreover, let's create a boilerplate configuration file by running the following command:

> npx tailwindcss init

A minimal configuration tailwind.config.js file will be created at the root folder of your project.

Add Tailwind styles in your CSS

The next step is to add the default CSS styles provided by the framework. To do this, we can use the custom @tailwind directive and add the main styles in our ./resources/css/app.css file (the default file created by Laravel):

@tailwind base;
@tailwind components;
@tailwind utilities;

Afterwards, let's also include the compiled ./public/css/app.css file in our view. In a clean Laravel installation, we can add it in the default ./resources/views/welcome.blade.php file:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
  <!-- Stylesheet -->
  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

<body>
	<!-- Your content -->
</body>

</html>

Configure Laravel Mix

We also need to tell Laravel Mix how to compile the @tailwind directive we previously used in our CSS file. To achieve that, we should configure it accordingly by adding Tailwind CSS as a PostCSS plugin in the webpack.mix.js file:

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

Configure PurgeCSS

Finally, configuring PurgeCSS functionality is important because it can help us minimize our CSS size by only including vital CSS styles based on the ones we are using in our HTML markup.

To enable it, we just need to tell it to check out our blade files when we run the npm run prod command. This can be easily done by adding the following item in the purge array, in our tailwind.config.js file:

// ...

purge: [
  './resources/views/**/*.blade.php',
]

// ...

That's it!

Everything should be working great by now and you can start putting together your UI with Tailwind CSS. Feel free to use the Laravel Mix commands you know and love and they will work great alongside the framework.

How to use Tailwind CSS in your Laravel Project

John Champ on Feb 23, 2021 · 2 min read

Install required dependencies and add a config file

Add Tailwind styles in your CSS

Configure Laravel Mix

Configure PurgeCSS

That's it!