Installing Tailwind CSS in Laravel

In case you have not heard about Tailwind CSS, its a Utility Based Framework. And it is quickly becoming very popular especially in the Laravel Community. More and more developers are adopting it for its ease to use. Infact, the Jetstream Package which was released with Laravel 8 Version for managing the Auth UI has been completely written using Tailwind CSS Framework.

You can use Tailwind CSS Framework in your project by grabbing it from CDN, which happens to be the traditional way. However, it has many drawbacks, the major one being that the size of CSS file is 2MB and even the compressed one is 45KB.

Tailwind Installation Page shows various ways to install it using NPM. However, there are a lot of options there and it could be quite confusing if you are just beginning. So lets look at the best way to install Tailwind in your Laravel Project.

First of all we will install tailwind as well as postcss using the below command

npm install tailwindcss postcss-import

Next we will generate a config file for Tailwind. We can do so using the following command

npx tailwindcss init

Once that is done, you can go to webpack.mix.js, which is located at the root of your project.

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

If you do not understand Laravel Mix, Line number 2 will generate the CSS File in public/css folder based on the CSS Configuration in resources/css/app.css

So lets go to this file. This will be empty currently. Lets paste the following contents

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

We will also update the webpack.config.js so as to apply tailwind and postCSS Configurations.

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

If you now run the command npm run dev, Laravel Mix will create the CSS and JS File in the public folder. The CSS File located at /public/css/app.css will have all the Tailwind CSS Classes. If you include this file in Layout, you will be able to use the Tailwind Framework.

However, our CSS File at this stage is still 2.28MB. We can improve it a lot. We will specify purge options in tailwind.config.js, which was created when we installed Tailwind Configuration File at the root of your project.

We can change this as below to specify the purge options as below:

module.exports = {
    purge: ['./storage/framework/views/*.php', './resources/views/**/*.blade.php', './resources/js/**/*.vue'],

    theme: {
    },
    variants: {
    },

    plugins: [],
};

This list should include any files in your project that reference any of your styles by name. Now when we run Laravel Mix, all the CSS which has not been used will be removed. This won’t work in development, this will only work in production. So now if you run npm run prod

And now if you check the CSS File it will be minified and its size will be less than 10KB. So we have been able to reduce the size of CSS from over 2MB to less than 10KB. That will result in a great improvement in the performance of your project.

Hope you have good understanding on how to install Tailwind in Laravel Project in the correct way. If you want to check a Video Version of the tutorial, you can watch the below Video.

Leave a Reply

Your email address will not be published. Required fields are marked *