Laravel Tailwind Tutorial

Using Tailwind CSS in Laravel is pretty straightforward. In this post, we set up Tailwind CSS in a typical Laravel project.

Install Tailwind CSS package

Run the command below to install Tailwind CSS packages:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure template paths

Configure the templates files' paths in the tailwind.config.js file:

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

The content sections should contain the paths to all the files might use Tailwind CSS.

Add the Tailwind directives to your CSS

Add the @tailwind directives to the resources/css/app.css file:

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

Compile the CSS assets

That is all for setting up Tailwind CSS in your Laravel project, run the command below to compile and start developing using Tailwind CSS in Laravel:

npm run dev