Basic setup tailwind css in Laravel

What is Tailwind? Tailwind is high customizable CSS Framework that can help you styling your web page. It’s like Bootstrap but with more lower level customizable.

In this post, I’ll show you how to setup tailwindcss into our Laravel project.

Create new Project

Open your terminal or command prompt, enter this command.

laravel new tailwindbasic

Wait until installation is done. Enter this newly created project folder.

Install tailwind via NPM

We can install tailwind to our project using NPM. Actually we can use CDN version, for quick demo. But, we can’t use Tailwinds’s customization features. For this post, we will use npm. Use following command to install.

npm install tailwindcss --save-dev

Add Tailwind to project CSS

Open app.scss in folder resources/sass/. Add this lines to inject some Tailwind’s features.

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

Create Tailwind Config File

This is optional step. If you want to customize your tailwind, we can utilize this file.

npx tailwindcss init

It will create tailwind.config.js file.

Build CSS

Almost there. Let’s open webpack.mix.js. Add this line below const mix = require(‘laravel-mix’);

const tailwindcss = require('tailwindcss');

Add options in our mix.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
        processCssUrls: false,
        postCss: [ tailwindcss('tailwind.config.js') ],
    });

There is bug in mix’s dependencies. So, to use Sass with tailwind, we disable processCssUrls.

Tailwind is ready

Run this command to build Tailwind into our css.

npm run dev

Now, we can use Tailwind in our Laravel project. Don’t forget to add this code in your head tag

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

If you have any questions, leave comment below!