DEV Community

jasuke-dev
jasuke-dev

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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"),
  ]);
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Add the Tailwind directives to your CSS

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Then add link style on your blade file

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

Lastly you can compile laravel-mix

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

npm run watch
Enter fullscreen mode Exit fullscreen mode

Now you can use tailwindcss on your laravel project

Top comments (0)