How to use Tailwind CSS with Laravel

Introduction
Getting Started with Laravel and Tailwind CSS
Setting Up Tailwind for Your Project
Writing Your First Tailwind Styled Page in Laravel
Advanced Customization
Conclusion

Introduction

In modern web development, leveraging a CSS framework to handle styling can vasty speed up the development process. Tailwind CSS, a utility-first CSS framework, is popular for its flexibility and ease of customization. Combining it with Laravel, one of the most powerful and widely used PHP frameworks, can help you build beautiful and responsive web applications efficiently. This comprehensive guide will walk you through integrating Tailwind CSS into your Laravel projects, starting from the basics to more advanced topics.

Prerequisites

Basic understanding of Laravel
Familiarity with HTML and CSS
Node.js and npm installed

Getting Started with Laravel and Tailwind CSS

To begin with, you need to have a Laravel project set up. If you don’t have one, you can create a new Laravel project by running:

composer create-project --prefer-dist laravel/laravel your-project-name

Once your Laravel project is ready, navigate to the project directory:

cd your-project-name

To install Tailwind CSS, you’d generally start by installing it via npm:

npm install tailwindcss postcss autoprefixer

However, Laravel Mix, which comes with Laravel, is a wrapper around Webpack and simplifies the entire build process. To integrate Tailwind with Laravel Mix, you can use the Tailwind CSS Laravel preset:

npm install laravel-frontend-presets/tailwindcss --dev

After installing the preset, apply it using the Artisan command line tool provided by Laravel:

php artisan ui tailwindcss --auth

The --auth flag is optional, but including it will scaffold basic authentication views styled with Tailwind CSS. Once Artisan finishes, compile your CSS:

npm run dev

This command processes your CSS files using Laravel Mix and dumps the output in the public directory.

Setting Up Tailwind for Your Project

The next step is to configure Tailwind to suit your project’s needs. Create a Tailwind configuration file using the Tailwind CLI:

npx tailwindcss init

This will create a tailwind.config.js file in your project root where you can customize Tailwind’s default configuration. You may also want to configure purgecss to remove unused styles and decrease the size of your CSS file:

// tailwind.config.js
module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  // other configurations
};

Be sure to list all the paths where your Tailwind CSS classes are used to ensure that purgecss doesn’t strip out styles you need.

Writing Your First Tailwind Styled Page in Laravel

Now, let’s create a new Blade view and add some Tailwind classes. Create a new view at resources/views/welcome.blade.php:

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  <title>Welcome to Laravel with Tailwind CSS</title>
</head>
<body>
  <h1 class="text-4xl font-bold text-center text-blue-500 mt-20">Welcome to Laravel with Tailwind CSS!</h1>
</body>
</html>

This view links the compiled Tailwind CSS and applies utility classes to the <h1> element to style it. Go ahead and run:

npm run dev

Advanced Customization

Tailwind is highly customizable. You can add new utilities, components, and plugins to extend its functionality. Let’s look at an example where we create a custom button component:

// resources/css/components/buttons.css
@tailwind components;

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

.btn:hover {
  @apply bg-blue-700;
}

After defining your custom component, import it into your main CSS file:

// resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './components/buttons.css';

Conclusion

Integrating Tailwind CSS with Laravel is a straightforward process that exponentially speeds up front-end development without compromising on customizability. With Laravel Mix and Tailwind’s preset, you can get up and running with a utility-first CSS framework in your Laravel applications swiftly. Remember to customize your configurations to tailor Tailwind’s extensive utility classes for a streamlined end-user experience.

Next Article: How to set up Bootstrap with Laravel

Previous Article: Laravel: How to Conditionally Display an Image with Blade

Series: Laravel & Eloquent Tutorials

PHP

PHP