How to setup Tailwind CSS in Laravel

  • Posted on: 2 December 2019
  • By: stillfinder

Installation

Run the following commands in terminal from your project's root:

npm install tailwindcss --save-dev
npm install laravel-mix-tailwind --save-dev
node_modules/.bin/tailwind init tailwind.js

Setup webpack.mix.js

Add at the top of your webpack.mix.js file the following:

require('laravel-mix-tailwind');

and then add '.tailwind();' to your mix. For example:

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