Installing Tailwind into Laravel

Stratulat Alexandru • January 6, 2019

tutorial tailwind laravel

How to install Tailwind into a Laravel project? This might be too obvious for experienced developers but I've noticed that some people are encountering difficulties with it.

1. Get Tailwind

Installing Tailwind is as easy as navigating to the root folder of your Laravel project and running:

npm install tailwindcss --save-dev

Tip: You must first run npm install in your project's root folder, if you haven't yet.

2. Generate the config file

To do this, we run the next command in the root folder of our Laravel project:

./node_modules/.bin/tailwind init

It will generate a file named tailwind.js right in the folder where you're located.

3. Add Tailwind to your project's styles

Navigate to resources/sass and create a new file named _tailwind.scss.

Put this code inside the newly created file:

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Note: preflight injects Tailwind's base styles; components injects component classes registered by plugins; utilities injects utility classes, generated based on your config.

By default Laravel places a default app.scss in the same resources/sass folder.

Inside app.scss, we'll need to import our new _tailwind.scss file, like this:

@import 'tailwind';

Inside app.scss we see that Bootstrap is imported by default. If you want to use only Tailwind, you're free to remove everything related to Bootstrap from this file (and also from package.json). However, if you want to use both Tailwind and Bootstrap, you'll have to prefix all of your Tailwind classes, so there won't be any naming conflicts. To do so, open your Tailwind config (tailwind.js) and scroll all the way down to the options section and set your custom prefix. Example:

{
    options: {
        prefix: 'tw-',
    },
}

Now all of your Tailwind classes will be prefixed like this: tw-bg-red, tw-px-6, md:tw-text-xl ...

4. Compile your styles with Laravel Mix

Open the file webpack.mix.js, which is located in the root folder of your Laravel project.

By default, Laravel already compiles the resources/sass/app.scss file into public/css/app.css, however we need to specify that we want to process our styles with Tailwind and our tailwind.js config file.

This is the default content of webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

All we have to do now is import Tailwind and specify the PostCSS config, like this:

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

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

Note: ./tailwind.js is basically the path to your Tailwind config file. Also, I guess you've noticed the processCssUrls: false, part. This is due to an unresolved issue with one of Laravel Mix's dependencies and it's mandatory for now.

Now we can run npm run dev or npm run watch to compile everything specified in our Mix config file.

After, we can import our freshly compiled CSS file in the head section of our blade layouts:

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

Final Notes

You're free to name all the files the way you want. I've just showed a basic example.

This article is just a retelling of the official Tailwind installation docs, but concentrated on Laravel only.

Next we will be building cool UI components from scratch, with VueJS and TailwindCSS. So stay tuned and maybe even subscribe below. Thanks!

Sign up for new posts

No spam. Unsubscribe at any time.