Tailwind in Laravel

Laravel developers are always looking for ways to streamline their development process while maintaining flexibility in design. Tailwind CSS has become a popular choice for styling Laravel applications due to its utility-first approach and ease of customization. In this guide, we’ll walk you through the steps to install and use Tailwind CSS in your Laravel project, complete with code examples and tips for both beginners and advanced users.

Table of content

• Why Choose Tailwind CSS for Laravel?
• Prerequisites
• Step 1: Create a Laravel Project
• Step 2: Install Tailwind CSS
• Step 3: Configure tailwind.config.js
• Step 4: Add Tailwind Directives to Your CSS
• Step 5: Compile Assets with Laravel Mix
• Creating a sample application
• Ways to Increase the efficiency of Using Tailwind CSS in your Application
• Conclusion

Why Choose Tailwind CSS for Laravel?

Tailwind CSS offers several advantages over traditional CSS frameworks like Bootstrap or Bulma:

• Utility-First Approach: Write styles directly in your HTML without switching contexts.
• Highly Customizable: Tailor the framework to fit your project’s unique needs.
• Lightweight: Only include the styles you need, reducing bundle size.
• Responsive Design Tools: Built-in utilities make it easy to create responsive layouts.

These features make Tailwind CSS an excellent choice for Laravel developers who want to build fast, maintainable, and visually appealing applications.

Prerequisites

Before getting started, ensure you have the following installed on your machine:

• PHP (v7.4 or later): Download from PHP Official Website .
• Composer : PHP package manager. Install it from Get Composer .
• Node.js (v16 or later): Download from Node.js Official Website .
• npm or yarn : Comes bundled with Node.js.
• Basic Knowledge of Laravel: Familiarity with Laravel concepts will help you understand the integration better.

Step 1: Create a Laravel Project

If you haven’t already created a Laravel project, you can do so using Composer:

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

Replace my-laravel-app with your desired project name. Navigate into the project directory:

cd my-laravel-app

This command sets up a new Laravel project with all the necessary files and configurations.

Step 2: Install Tailwind CSS

To integrate Tailwind CSS into your Laravel project, follow these steps:

• Option 1: Using the CLI Tool (Recommended) Run the following command to install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

After installation, initialize Tailwind CSS by running:

npx tailwindcss init -p

This creates two essential configuration files:

• tailwind.config.js: For customizing Tailwind CSS.
• postcss.config.js: For configuring PostCSS.

Step 3: Configure tailwind.config.js

Open the tailwind.config.js file in your project root and configure it according to your needs. Here’s an example configuration:

module.exports = {
	content: [
		"./resources/**/*.blade.php", // Blade templates
		"./resources/**/*.js", // JavaScript files
		"./resources/**/*.vue", // Vue components (if using Vue)
	],
	theme: {
		extend: {
			colors: {
				primary: "#1da1f2", // Example custom color
			},
		},
	},
	plugins: [],
};

The content property specifies which files Tailwind should scan for class names. Ensure you include all relevant paths to avoid missing styles.

Step 4: Add Tailwind Directives to Your CSS

Open the resources/css/app.css file (or create one if it doesn’t exist) and add the following Tailwind directives:

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

These directives import the base styles, component styles, and utility classes provided by Tailwind CSS.

Step 5: Compile Assets with Laravel Mix

Laravel uses Laravel Mix to compile assets. Open the webpack.mix.js file in your project root and update it as follows:

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

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

Now, compile your assets using the following commands:

npm install
npm run dev

For production builds, use:

npm run prod

This ensures your Tailwind CSS styles are compiled and ready for use.

Creating a sample application

You’re now ready to start using Tailwind CSS in your Laravel Blade templates! Here’s an example of a simple Form styled with Tailwind:

<body>
       <div class="bg-gradient-to-br from-purple-900 to-indigo-900
          flex flex-wrap items-center
          justify-center min-h-screen">
           <form class="w-full max-w-md bg-white shadow-md rounded px-8 pt-8">
            <div class="mb-4">
               <label class="text-gray-800 text-sm block font-bold mb-2 pb-2">Username</label>
               <input class="shadow appearance-none border
                  rounded w-full py-2 px-3 text-gray-700 leading-tight
                  focus:outline-none focus:shadow-outline" id="username" type="text"
                  placeholder="Username">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
                <input class="shadow appearance-none border
                    border-red-500 rounded w-full py-2 px-3
                    text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password"
                    type="password" placeholder="**************">
                <p class="text-purple-500 text-xs italic">Please choose a Password.</p>
            </div>
            <div class=" flex items-center justify-between">
                <button class="bg-purple-500 hover:bg-indigo-700
                  text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                  type="button">
                    Sign in
                  </button>
                <a class="inline-block align-baseline
                  font-bold text-sm text-indigo-500 hover:text-indigo-900" href="#">
                    Forgot Password?
                  </a>
            </div>
            <div class="px-8 pt-8">
                <p class="text-center
                  text-gray-900 text-xs
                  font-bold">@2023 Devwares develop. All rights reserved.
                </p>
            </div>
           </form>

       </div>
    </body>
</html>

Below is how our webpage should look once we have saved our file. And reloaded our server.

Preview

Ways to Increase the efficiency of Using Tailwind CSS in your Application.

Purge Unused Styles in Production

To optimize performance, remove unused styles in production builds. Update your tailwind.config.js file:

module.exports = {
  content: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'],
  purge: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'], // Deprecated in newer versions; use `content` instead.
  theme: {
    extend: {},
  },
  plugins: [],
};

Then, run the production build command:

npm run prod

Customize Breakpoints

Tailwind allows you to define custom breakpoints for responsive design. Update the theme section in tailwind.config.js:

theme: {
  screens: {
    sm: '480px',
    md: '768px',
    lg: '976px',
    xl: '1440px',
  },
},

Now, you can use these breakpoints in your Blade templates:

<div class="md:w-1/2 lg:w-1/3 xl:w-1/4">
  <!-- Content -->
</div>

Integrate with Plugins

Enhance Tailwind with plugins like Tailwind Typography for beautiful typography:

npm install @tailwindcss/typography

Then, add the plugin to your tailwind.config.js:

plugins: [
  require('@tailwindcss/typography'),
],

Conclusion

With Tailwind CSS, Laravel developers can achieve rapid development, high customization, and lightweight styling. Whether you're a beginner or an advanced user, Tailwind CSS offers tools and features to meet your needs. By following this guide, you’ve learned how to install and use Tailwind CSS in your Laravel project, along with advanced tips to take your skills further.