Add TailwindCss to laravel use laravel-mix

Here i will tell you how to add tailwindCss to your laravel project.

First install tailwindCss, postCss and autoprefixer packages to your project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Second add tailwindCss to laravel-mix configuration

on webpack.mix.js add following code

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

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

at './resource/css/app.css add this tailwind directives

@tailwind base;
@tailwind components;
@tailwind utilities;

Then add link style on your blade file

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

Lastly you can compile laravel-mix

make sure you have alredy set "npm run watch:mix" watch on package.json

npm run watch

Now you can use tailwindcss on your laravel project