How to add Tailwind CSS 3 and its official plugins to your Laravel 9 project ~ pixelcave

Adding Tailwind CSS 3 to your Laravel 9 project is a simple task. If you don't have a Laravel project, you can easily create a brand 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

Let's add Tailwind CSS and required config files

To use Tailwind CSS, we need the framework itself, PostCSS and Autoprefixer:

> npm install -D tailwindcss postcss autoprefixer

Moreover, let's create a boilerplate configuration file by running the following command:

> npx tailwindcss init

A configuration tailwind.config.js file will be created at the root folder of your project where you can alter default framework options or extend it. Even if we don't want to make any changes though, we have to specify in which files we are going to use Tailwind CSS classes, so that the framework can grab them and generate the styles for us. To do that, we need to add the appropriate paths in tailwind.config.js file:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS

The next step is to add the required directives in our CSS file. We can add them in the default CSS file at ./resources/css/app.css (created by Laravel's installer):

@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">
  
  <title>Laravel Project</title>
         
  <!-- 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"),
  ]);

Installing the official plugins

There are currently 4 official plugins which add various features to the framework and should come in handy in many cases. To add them in our project, we can easily install them through npm…

> npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio

…and register them in tailwind.config.js file:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

You are ready!

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 add Tailwind CSS 3 and its official plugins to your Laravel 9 project

John Champ on Feb 16, 2022 · 3 min read

Let's add Tailwind CSS and required config files

Add Tailwind directives to your CSS

Configure Laravel Mix

Installing the official plugins

You are ready!