Install Tailwind CSS in Laravel

Table of Contents

Prerequisites
Step 1: Navigate to your Laravel Project Directory
Step 2: Install Tailwind CSS
Step 3: Create Tailwind Config File
Step 4: Configure Tailwind to Process Your CSS
Step 5: Start the Build Process
Step 6: Start Using Tailwind CSS
Conclusion

Integrating Tailwind CSS with Laravel enhances your web application’s styling capabilities and revolutionizes how you approach UI development. Tailwind CSS is a utility-first CSS framework that allows developers to style their applications directly within their HTML markup. By providing a vast array of utility classes, Tailwind enables rapid UI development, making it easier to implement custom designs without leaving your HTML. This approach encourages a more efficient and flexible way of building interfaces, reducing the need to write custom CSS.

Boost your Laravel apps with our specialized Laravel Hosting. Experience faster speeds for your Laravel applications and websites thanks to NVMe storage, server protection, dedicated resources, and optimization tools.

99.99% Uptime Free SSL Dedicated IP Address Developer Tools

Laravel Hosting

Prerequisites

Node.js and npm installed

Step 1: Navigate to your Laravel Project Directory

Start by navigating to your Laravel project’s directory.

cd my-laravel-project

If you don’t have a project set up already, you can use Composer or Softaculous to install Laravel.

Step 2: Install Tailwind CSS

Now install Tailwind CSS through npm. Open your terminal, navigate to your Laravel project directory, and run the following command:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

This command installs Tailwind CSS along with PostCSS and Autoprefixer, which are necessary for processing Tailwind’s CSS file.

Step 3: Create Tailwind Config File

Generate a Tailwind configuration file by executing:

npx tailwindcss init -p

This command creates a tailwind.config.js and a postcss.config.js file in your project root. You can customize this configuration file to tailor Tailwind’s setup to your project’s needs.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 4: Configure Tailwind to Process Your CSS

Create a CSS file in your ./resources/css directory, for example, app.css, and add the Tailwind directives to it:

app.css
@tailwind base; 
@tailwind components; 
@tailwind utilities;

Step 5: Start the Build Process

Run the following command to compile your CSS and JS files including Tailwind CSS.

npm run dev

Or, for production, use:

npm run prod

This command minimizes the CSS, optimizing it for production use.

Step 6: Start Using Tailwind CSS

Add the compiled CSS to the <head> of your view using @vite to import the app.css file.

test.blade.php
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Test View</title>
  </head>

You can now start using Tailwind utility classes to style your application.

test.blade.php
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Test View</title>
  </head>
  <body>
    <h1 class="mb-6 text-5xl font-bold">
      Hello world!
    </h1>
  </body>
</html>

Conclusion

You’ve successfully integrated Tailwind CSS into your Laravel project. You can now use Tailwind’s utility classes to style your application directly within your views, speeding up development and ensuring a consistent design system.

Remember, you can customize your tailwind.config.js file to extend or modify Tailwind’s default configuration, tailoring it to your project’s specific needs.

Happy styling with Tailwind CSS and Laravel!

Need More Help?