How to install Tailwind CSS with 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:

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

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

1cd 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:

1npm install -D tailwindcss postcss autoprefixer

After installation, initialize Tailwind CSS by running:

1npx 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:

1module.exports = {
2	content: [
3		"./resources/**/*.blade.php", // Blade templates
4		"./resources/**/*.js", // JavaScript files
5		"./resources/**/*.vue", // Vue components (if using Vue)
6	],
7	theme: {
8		extend: {
9			colors: {
10				primary: "#1da1f2", // Example custom color
11			},
12		},
13	},
14	plugins: [],
15};

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:

1@tailwind base;
2@tailwind components;
3@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:

1const mix = require("laravel-mix");
2
3mix
4	.js("resources/js/app.js", "public/js")
5	.postCss("resources/css/app.css", "public/css", [
6		require("tailwindcss"),
7		require("autoprefixer"),
8	]);

Now, compile your assets using the following commands:

1npm install
2npm run dev

For production builds, use:

1npm 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:

1<body>
2       <div class="bg-gradient-to-br from-purple-900 to-indigo-900
3          flex flex-wrap items-center
4          justify-center min-h-screen">
5           <form class="w-full max-w-md bg-white shadow-md rounded px-8 pt-8">
6            <div class="mb-4">
7               <label class="text-gray-800 text-sm block font-bold mb-2 pb-2">Username</label>
8               <input class="shadow appearance-none border
9                  rounded w-full py-2 px-3 text-gray-700 leading-tight
10                  focus:outline-none focus:shadow-outline" id="username" type="text"
11                  placeholder="Username">
12            </div>
13            <div class="mb-6">
14                <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
15                <input class="shadow appearance-none border
16                    border-red-500 rounded w-full py-2 px-3
17                    text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password"
18                    type="password" placeholder="**************">
19                <p class="text-purple-500 text-xs italic">Please choose a Password.</p>
20            </div>
21            <div class=" flex items-center justify-between">
22                <button class="bg-purple-500 hover:bg-indigo-700
23                  text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
24                  type="button">
25                    Sign in
26                  </button>
27                <a class="inline-block align-baseline
28                  font-bold text-sm text-indigo-500 hover:text-indigo-900" href="#">
29                    Forgot Password?
30                  </a>
31            </div>
32            <div class="px-8 pt-8">
33                <p class="text-center
34                  text-gray-900 text-xs
35                  font-bold">@2023 Devwares develop. All rights reserved.
36                </p>
37            </div>
38           </form>
39
40       </div>
41    </body>
42</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:

1module.exports = {
2  content: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'],
3  purge: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'], // Deprecated in newer versions; use `content` instead.
4  theme: {
5    extend: {},
6  },
7  plugins: [],
8};

Then, run the production build command:

1npm run prod

Customize Breakpoints

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

1theme: {
2  screens: {
3    sm: '480px',
4    md: '768px',
5    lg: '976px',
6    xl: '1440px',
7  },
8},

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

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

Integrate with Plugins

Enhance Tailwind with plugins like Tailwind Typography for beautiful typography:

1npm install @tailwindcss/typography

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

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

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.