Tail Template

‐ handcrafted Tailwind CSS templates for your next project

Laravel Tailwind Tutorial

By TailTemplate Team

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

A project by  StaticMaker. Twitter

This site is proudly powered by Tailwind CSS and Laravel Livewire