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.
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).