How to add Tailwind CSS 3 and its official plugins to your Laravel 9 project
John Champ on Feb 16, 2022 · 3 min read

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.
Would you like to let you know about any new posts? Join us and also get our carefully designed UI resources.