Setting up Tailwind CSS for Laravel

I have wanted for some time, to play around with Tailwind CSS, but didn't want to spend the time trying to get a smooth flow of building the CSS and JS libraries on Windows 10. Finally, I have had some time to investigate, and it turns out, it's not as difficult as I somehow imagined.

I have choosen to run my development setup on Laragon (Guide to setting up Laragon I wrote a while back).

First, let's start out with creating our new Laravel project.

laravel new tailwinddemo

Make sure that you have ""cross-env"" installed in you node library (pref. as global).

npm install --global cross-env

Now, let's install tailwind itself and node dependencies.

npm install tailwindcss
npm install

Now, Tailwind CSS is installed and needs to be added to ""webpack.mix.js"", for it to compile into the .css file. Open up webpack.mix.js, located in your project root folder.

// Replace this string:
.sass('resources/sass/app.scss', 'public/css');
// with this
.postCss('resources/css/main.css', 'public/css', [require(""tailwindcss"")]);

To make it build, we still need to do a few things. We need a folder (as per the line we added in webpack.mix.js) called ""CSS"" under resources. In that folder, we need to create a CSS file ""main.css"", with the following content

@tailwind base;

@tailwind components;

@tailwind utilities;

This now enables us to build the Tailwind CSS and place it in the ""public/css"" as ""main.css"". As of writing this, there are no built-in frontend presets (although Taylor briefly talks about that being baked in, in the future over at PHP Town Hall podcast).