How to Integrate Tailwind CSS with Laravel 11

By:
On:
In: Laravel
Tagged: , , ,
With: 0 Comments

Integrating Tailwind CSS with Laravel can greatly enhance your front-end development by providing a utility-first CSS framework that makes styling components straightforward and efficient. Here’s a step-by-step guide on how to set up and integrate Tailwind CSS with Laravel.

Step 1: Set Up a New Laravel Project

First, you need to have a Laravel project. If you don’t already have one, you can create a new Laravel project using Composer.

composer create-project --prefer-dist laravel/laravel my-laravel-app
cd my-laravel-app

Step 2: Install Tailwind CSS

Next, you need to install Tailwind CSS via npm. If you don’t have npm installed, make sure to install Node.js, which includes npm.

npm install -D tailwindcss

After installing Tailwind CSS, you need to create the Tailwind configuration file.

npx tailwindcss init

This command creates a tailwind.config.js file in the root of your project, which you can use to customize your Tailwind setup.

Step 3: Configure Tailwind to Remove Unused Styles

In production, it’s important to remove unused CSS to keep your stylesheets as small as possible. You can configure Tailwind to do this by modifying the purge option in the tailwind.config.js file.

module.exports = {
  purge: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

This configuration tells Tailwind to purge unused styles from your Blade and Vue files.

Step 4: Include Tailwind in Your CSS

Next, create a CSS file (e.g., resources/css/app.css) and include the Tailwind directives.

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

Step 5: Compile Your CSS

To compile your CSS, you need to set up Laravel Mix, which is already included in Laravel. First, install the necessary dependencies.

npm install

Then, open webpack.mix.js and configure it to compile your Tailwind CSS.

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

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

After configuring Laravel Mix, run the following command to compile your assets.

npm run dev

For production, you should use the npm run production command to ensure that Tailwind purges unused styles.

Step 6: Use Tailwind in Your Views

Now you can use Tailwind CSS classes in your Blade templates. Open a Blade template (e.g., resources/views/welcome.blade.php) and start using Tailwind classes to style your elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel with Tailwind CSS</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gray-100 text-center">
    <div class="container mx-auto">
        <h1 class="text-4xl font-bold text-blue-600">Welcome to Laravel with Tailwind CSS!</h1>
    </div>
</body>
</html>

Conclusion

Integrating Tailwind CSS with Laravel is straightforward and offers a powerful way to enhance your front-end development workflow. By following these steps, you can set up Tailwind CSS in your Laravel project, allowing you to quickly and efficiently style your application with a utility-first approach. Tailwind’s extensive documentation and community support also provide great resources for learning and mastering this tool.

Leave a Reply