How to use Tailwind CSS in Laravel and Vite

3 min read 11 months ago
Published on Sep 10, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Introduction

In this tutorial, we will learn how to install Tailwind CSS in a Laravel project using Vite. With Laravel transitioning to Vite instead of Mix, this guide will walk you through the process step-by-step, based on the official Tailwind CSS documentation. If you need assistance with setting up Laravel itself, consider watching a supplementary video on that topic.

Step 1: Set Up a New Laravel Project

Before integrating Tailwind CSS, ensure you have a Laravel project ready. If you don't have one, follow these steps:

  1. Install Laravel via Composer:
    composer create-project laravel/laravel my-project
    
  2. Navigate to your project directory:
    cd my-project
    

Step 2: Install Vite

Vite is the new build tool that Laravel uses for asset compilation. Ensure it's properly set up in your Laravel project.

  1. Install the necessary Vite dependencies:
    npm install
    
  2. Ensure Vite is configured in your project by checking the vite.config.js file. It should be present in the root of your project.

Step 3: Install Tailwind CSS

Now, let’s add Tailwind CSS to your project.

  1. Install Tailwind CSS and its peer dependencies via npm:
    npm install -D tailwindcss postcss autoprefixer
    
  2. Initialize Tailwind CSS in your project:
    npx tailwindcss init -p
    
    This command creates a tailwind.config.js file and a postcss.config.js file in your project.

Step 4: Configure Tailwind CSS

Next, configure Tailwind CSS to remove unused styles in production.

  1. Open the tailwind.config.js file and set the content option:
    module.exports = {
      content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    
    This configuration allows Tailwind to scan your Blade, JS, and Vue files for class names to include.

Step 5: Add Tailwind Directives

You need to include Tailwind's base, components, and utilities styles in your CSS.

  1. Create a new CSS file in the resources/css directory, e.g., app.css.
  2. Add the following Tailwind directives to app.css:
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

Step 6: Import the CSS File

Now, you need to tell Vite to compile your CSS file.

  1. Open the resources/js/app.js file and import the CSS:
    import '../css/app.css';
    

Step 7: Build Assets

You are now ready to compile your assets.

  1. Run the following command to build your assets:
    npm run dev
    
    This command starts the Vite development server and compiles your assets.

Step 8: Test Tailwind CSS

To ensure Tailwind CSS is working, you can add some Tailwind classes to your Blade templates.

  1. Open a Blade view file (e.g., resources/views/welcome.blade.php).
  2. Add some Tailwind classes to an HTML element, for example:
    <h1 class="text-3xl font-bold underline">
       Hello, Tailwind CSS!
    </h1>
    

Conclusion

You have successfully installed Tailwind CSS in your Laravel project using Vite. You can now start building beautiful, responsive designs with Tailwind's utility-first approach. Remember to run npm run dev whenever you make changes to your CSS or JavaScript files to see the updates in your browser. For further customization and best practices, refer to the Tailwind CSS documentation.