How to Install Tailwind CSS in Laravel 8

Alexandra Murtaza -

There are many ways to install Tailwindcss on a fresh Laravel 8 install. You can configure your application by yourself or use a Preset to do it faster. We'll start with the custom one, skip to the end to check available presets.

Install Tailwind CSS

First, let's install NPM dependencies

npm install

Now install tailwindcss via npm

npm install tailwindcss

Add Tailwindcss to your resources/css/app.css

You don't have to install autoprefixer or postcss-import, because it's already installed with laravel mix

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Create your Tailwind config file

npx tailwindcss init

Update your webpack.mix.js file

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

Compile your assets

Finish by compiling your assets and you'll be ready.

npm run dev

Tailwind CSS Presets

There are many presets ready for installing Tailwindcss in a Laravel project, some of them even includes few auth components to get the ball rolling: